When the React state is updated in ThreeJS, the animation resets

Question

whenever I update the state in ThreeJS, the animation resets, please see the code sandbox, try tapping the "press me" button which updates the state as a result the dino and the gem animation is being reset, how can I avoid the animations being reset ?

CodeSandBox

Also see the video with the issue.

export default function App(props) {
  const [tryState, setTryState] = useState(0);

  function onChangeState() {
    setTryState(Math.floor(Math.random() * 101));
  }

  return (
    <div className="App" style={{ width: "100%", height: "100%" }}>
    <button onClick={() => onChangeState()}>Press Me</button>
      <Canvas>
        <ambientLight />
        <pointLight position={[10, 10, 10]} />
        <ThreeModel model={"Final.glb"} />
        {/* <Environment files="background.hdr" background /> */}
        <OrbitControls
          // minPolarAngle={Math.PI / 6}
          // maxPolarAngle={Math.PI / 2}
          minDistance={3}
          maxDistance={7}
        />
      </Canvas>
    </div>
  );
}