I don't know why but my react-spring only works when there is a Canvas from react-three-fiber.

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> */}
    </>
  );
}

If I uncomment that <Canvas></Canvas> it works, but if I comment Canvas, it does not work. I don't know if that has to do with other react-router-dom page. (I am using some react-three-fiber Canvas in "home" page", this will be the "blog" page)

Help!