No sé por qué, pero mi resorte de reacción solo funciona cuando hay un lienzo de tres fibras de reacción.

 import React from 'react'; import { Canvas } from "@react-three/fiber"; import { useSpring, animated } from "react-spring"; // These are from the react-spring website so It does work. function LoopTrue() { const styles = useSpring({ loop: true, from: { rotateZ: 0 }, to: { rotateZ: 180 }, }); return ( <animated.div style={{ width: 80, height: 80, backgroundColor: "#46e891", borderRadius: 16, ...styles, }} /> ); } function Angle() { const [flip, set] = useState(false); const props = useSpring({ reset: true, reverse: flip, from: { transform: "rotateX(0deg)" }, transform: "rotateX(180deg)", delay: 200, onRest: () => set(!flip), }); return <animated.h1 style={props}>angle</animated.h1>; } function Project() { return ( <> <Angle/> <LoopTrue/> {/* <Canvas></Canvas> */} </> ); }

Si descomento ese <Canvas></Canvas> funciona, pero si comento Canvas, no funciona. No sé si eso tiene que ver con otra página de react-router-dom. (Estoy usando un lienzo de tres fibras de reacción en la página de "inicio", esta será la página del "blog")

¡Ayuda!