Tengo un código de demostración aquí: https://codesandbox.io/s/modest-bird-j4jxt7

Cuando presiono y mantengo presionado el botón rojo, luego me desplazo hacia adelante y hacia atrás continuamente, el control deslizante de la imagen de arriba no se mueve. Simplemente comienza a moverse cuando dejo de mover el botón rojo.

Aquí estoy usando el evento de movimiento del mouse para actualizar el scrollLeft del control deslizante de arriba. Sin embargo, no sé por qué scrollLeft solo se actualiza después de detener el evento de movimiento del mouse.

Quiero que el control deslizante de la imagen se mueva al mismo tiempo que se mueve el botón rojo. ¿Tienen alguna idea de cuál es el problema y si hay alguna forma de solucionarlo?

Muchas Gracias Por Leer!

 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; };