I have a demo code here: https://codesandbox.io/s/modest-bird-j4jxt7

When I press and hold the red button, then scroll back and forth continuously, the image slider above doesn't move. It just starts moving when I stop moving the red button.

Here I'm using the mouse move event to update the scrollLeft of the slider above. However, I don't know why scrollLeft is only updated after I stop the mouse move event.

I want the image slider to be moved at the same time as the movement of the red button. Do you guys have any ideas for what the problem is and if there is a way to fix it?

Thank you so much for reading!

 const handleMouseMove = (e) => {
    const positionLeft = getPosition(e);
    setPositionLeft(positionLeft);

    const sliderElement = sliderRef.current;
    const sliderBarElement = sliderBarRef.current;
    const sliderBarWidth = sliderBarElement?.offsetWidth;
    const contentWidth = sliderElement?.scrollWidth;
    const viewableRatio = sliderBarWidth / contentWidth;
    const sliderPosition = positionLeft / viewableRatio;

    // The problem is here
    sliderElement.scrollLeft = sliderPosition;
  };