There is a confusion in my head originating from react docs mention about not overusing useRef: https://reactjs.org/docs/refs-and-the-dom.html#dont-overuse-refs.
In my current react coding style I am using dom api to manipulate dom than useRef hook, because of the rule I made to only useRef when it is absolutely needed, but I can't make logic why I have to replace useRef with dom api. Or should I useRef in this case?
Look at exactly what the material you linked to is saying:
Your first inclination may be to use refs to “make things happen” in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to “own” that state is at a higher level in the hierarchy.
It says that you should avoid refs (and therefore direct manipulation of DOM elements) in favour of altering the DOM through state and props.
If you need direct access to the DOM then you should absolutely be using refs. It is questioning the need for direct access to the DOM not the use of refs to get it.