I have a react-spring simple rotation animation with adjustable speed. But once I sett the speed to full (setting duration to 10ms) and returning it to lower even 1 second, it wouldn't animate properly and rather gets lagging.

Here is the animation preview https://3l3kb.csb.app/

And here is the sandbox https://codesandbox.io/s/spring-anim-test-forked-6wno4

And here is the code

export default function App() {
  const [reverse, setReverse] = useState(false);
  const [speed, setSpeed] = useState(50);

  const rotation = useSpring({
    from: { transform: "rotate(0deg)" },
    to: { transform: "rotate(360deg)" },
    loop: true,
    reset: true,
    config: { duration: 10 + (100 - speed) * 10 }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {/* <animated.div>
        <animated.h1>{num.get().toFixed(2)}</animated.h1>
      </animated.div> */}
      <div
        style={{
          width: "300px",
          height: "300px",
          position: "relative",
          margin: "auto"
        }}
      >
        <animated.div
          style={{
            ...{
              ...rotation,
              marginLeft: "auto",
              position: "absolute",
              color: "purple",
              fontSize: "130px"
            }
          }}
        >
          T
        </animated.div>
      </div>
      <input
        type="range"
        value={speed}
        onChange={(e) => setSpeed(e.target.value)}
        style={{
          marginTop: "100px",
          width: "500px"
        }}
      />
    </div>
  );
}