Tengo un control deslizante de imagen que se puede desplazar horizontalmente. Debajo del control deslizante de la imagen hay un componente con 2 botones de flecha como < . . . . . . > . Cuando el usuario hace clic en los botones izquierdo/derecho o desplaza el contenedor, se ejecuta un desplazamiento.

El problema que tengo es que no encontré forma de ejecutar solo el controlador de desplazamiento de los botones o solo uno del contenedor. Cuando un usuario hace clic en el botón de flecha, el desplazamiento del contenedor también se activa y tengo que evitarlo.

He intentado:

1. Establecer un estado como 'arrowButtonIsPressed' verdadero/falso y cambiar entre los controladores de eventos de desplazamiento, pero no se sincroniza porque el cambio de estado ocurre antes de que finalice el desplazamiento.

2. Cuando el usuario hace clic en el botón de flecha, elimino el controlador de eventos para Container Scroll, ejecuto el desplazamiento y luego agrego Container Scroll para que el usuario pueda continuar con el desplazamiento normal pero con setTimeout(). Pero si hacer clic rápido en los botones de flecha, está arruinando la lógica del controlador de desplazamiento.

3. Intenté detectar cuándo finaliza la animación scrollIntoView (usada al hacer clic en el botón de flecha), pero sin éxito.

ParentComponent.tsx > ScrollComponent.tsx (contenedor: ParentComponent)

Captura de pantalla

PD: la razón por la que tengo controladores de eventos de desplazamiento es para calcular la posición del elemento activo (punto grande) tanto del desplazamiento del contenedor como del clic del botón scrollIntoView .