Estoy tratando de hacer que un cubo gire de acuerdo con el movimiento del mouse y, aunque <Mi cuadro giratorio es un elemento secundario del lienzo, sigo recibiendo: ¡Los ganchos de error R3F solo se pueden usar dentro del componente Canvas! Y probablemente sea causado por la función useTHREE porque cuando la elimino, el error desaparece

 import { Canvas, useFrame } from "react-three-fiber"; import "./styles.css"; import { useThree } from "@react-three/fiber"; const MyRotatingBox = (props) => { const mouse = useThree((state) => state.mouse) const myMesh = React.useRef(); const [onHover, setOnHover] = useState(false); useFrame(({ clock }) => { if (onHover) { myMesh.current.rotation.x += props.mouse.movementX * 0.1; } }); return ( <mesh ref={myMesh} onPointerOver={(e) => setOnHover(true)} onPointerOut={(e) => setOnHover(false)} > <boxBufferGeometry /> <meshPhongMaterial color="royalblue" /> </mesh> ); } export default function App() { return ( <div className="App"> <Canvas> <MyRotatingBox /> <ambientLight intensity={0.1} /> <directionalLight /> </Canvas> </div> ); }