Проблема с draggable horizontal scroll

Есть компонент, где я использую canvas:

const MainCanvas:React.FC<IMainCanvas> = ({graphicRef,data,graphic}) => {
const [height, setHeight]=useState<number | undefined>(graphicRef.current?.clientHeight ? graphicRef.current?.clientHeight-142 : undefined)
const refCanvas=useRef<HTMLCanvasElement>(null)
const refContainer=useRef<HTMLDivElement>(null)
const refCanvasCrossHair=useRef<HTMLCanvasElement>(null)
const [width, setWidth]=useState<number | undefined>(graphicRef.current?.clientWidth? graphicRef.current?.clientWidth-64 : undefined)
const resizeHandler = () => {
    const { clientHeight, clientWidth } = graphicRef.current || {};
    if(clientHeight && clientWidth){
      setHeight(clientHeight-142)
      setWidth(clientWidth-64)
    }
  };
useEffect(() => {
    window.addEventListener("resize", resizeHandler);
    resizeHandler();
    return () => {
      window.removeEventListener("resize", resizeHandler);
    };
  }, []);
  useEffect(()=>{
    if(refCanvas.current && refCanvasCrossHair.current){
      const ctx=refCanvas.current.getContext('2d')
      const ctx2=refCanvasCrossHair.current.getContext('2d')
      if(ctx && data.length!==0 && ctx2){
          CanvasStart(ctx,refCanvas.current,ctx2,refCanvasCrossHair.current,data,refContainer)
      }
  }
  },[height, width,data])
  return (
    <div className={styles.wrap} ref={refContainer} style={{width: graphicRef.current?.clientWidth ? graphicRef.current?.clientWidth-64 : undefined, height:height}} id='main_canvas'>
        <canvas width={width} height={height} ref={refCanvas} className={styles.canvas} id='main_canvas'></canvas>
    </div>
  )
}

Сама функция canvasStart() содержит в себе следующую логику:

export function CanvasStart(ctx:CanvasRenderingContext2D,canvas:HTMLCanvasElement,ctx2:CanvasRenderingContext2D,canvas2:HTMLCanvasElement,data: string[][], refContainer:RefObject<HTMLDivElement>){
    const candlestiks=data
    let container=refContainer.current
    const heightCanvas=canvas.height
    const widthCanvas=candlestiks.length*3
    if(container){
            container.scrollLeft=container.scrollWidth
    }
    // добавление обработчиков событий
    let isPressed=false
    let startX=0
    let deltaX = 0
    function handleMouseMove(event:MouseEvent) {
            if(container && isPressed){
                    deltaX = startX-event.clientX;
                    container.scrollLeft = container.scrollLeft + deltaX;
                    startX=event.clientX
            }
    }
    function handleMouseUp(event:MouseEvent) {
            startX=0
            if(container){
                    container.style.cursor='crosshair'
            }
            container?.removeEventListener('mousemove', handleMouseMove);
            container?.removeEventListener('mouseup', handleMouseUp);
    }
    container?.addEventListener('mousedown', function(e) {
            if(container){
                    container.style.cursor='pointer'
            }      
            isPressed=true
            startX = e.clientX;
    
      container?.addEventListener('mousemove', handleMouseMove);
      container?.addEventListener('mouseup', handleMouseUp);
    });

При первой загрузки страницы скролл работает нормально, но если я что-то делаю на сайте и затем хочу проскроллить, скролл как будто увеличивает свою чувствительность и скроллит очень быстро, хотя движение мышкой мало. Подскажите, пожалуйста, как решить эту проблему?