How to focus a specific component on page load in React using hooks?

Question

I'm trying to have my app automatically focus on an element in React.

I know that you can do it with the useRef hook, but it is not working in this instance because the element is part of a library.

It is returning this error: index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

The library I am using is react-three-fiber, which is an abstraction layer on top of THREE.js.

Here is my code:

function App() {

  const canvasRef = useRef();

  useEffect(() => {
    canvasRef.current.focus();
  }, []);

  return (
    <div className="App">
      <div className="container">
        <Canvas colorManagement camera={{ fov: 70 }} ref={canvasRef}>
          <ambientLight intensity={0.4} />
          <Controls />
          <Selector />
        </Canvas>
        <div className="grid-container">
          <div className="grid-child child1"></div>
          <div className="grid-child child2"></div>
        </div>
      </div>
    </div>
  );
}