Reactively Change Control Value

[jbarber34]

Hello all, I have a question about reactively updating a control value. In the following code, I am looking to update the value of the frame when the play button is pushed which increases the frameValue.

const [frameValue, setFrameValue] = useState(0);

const { play, frame, speed } = useControls('Controls', {
    play: { value: false, label: 'Play/Pause' },
    speed: { value: 4, min: 0.5, max: 10, step: 0.1, label: 'Speed' },
    frame: {
      value: 1,
      min: 1,
      max: 100,
      step: 1,
      label: 'Manual',
    },
  });

  useEffect(() => {
    setFrameValue(Math.floor(frame));
  }, [frame]);

  useFrame(() => {
    if (play) {
      setFrameValue((prevFrame) => {
        const increment = 0.1 * speed; // Adjust the increment as needed
        const nextFrame = prevFrame + increment;
        return nextFrame >= 100 ? 0 : nextFrame;
      });
    }
  });

Currently, when I push the play button my animation plays, but my Manual progress bar does not update with the current filterValue and I'm looking for that to update reactively. I have tried the method shown here: #338, but then when I hit play, I can't pause it and the value still doesn't update. Is it possible to do what I'm looking for?