Draggable scroll проблем, react

У меня есть компонент, где я хочу реализовать draggable свойство:

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 container=refContainer.current
const refCanvasCrossHair=useRef<HTMLCanvasElement>(null)
const [width, setWidth]=useState<number | undefined>(graphicRef.current?.clientWidth? graphicRef.current?.clientWidth-64 : undefined)
const [maxPrice, setMaxPrice]=useState<number>(0)
const [minPrice, setMinPrice]=useState<number>(0)
const [startX, setStartX]=useState<number>(0)
const ctx=refCanvas.current?.getContext('2d')
const [isPressed, setIsPressed]=useState<boolean>(false)
const [howCandleInRange, setHowCandleInRange]=useState<number>(0)
const  handleMouseDown=(e:MouseEvent)=>{
  e.preventDefault();
  if(container){
          container.style.cursor='pointer';
  }     
  setIsPressed(true)
  setStartX((prev)=>e.clientX)
 
  console.log('down')
}
const  handleMouseMove=(event:MouseEvent)=> {
    event.preventDefault();
    if(container && isPressed){
      const deltaX = startX-event.clientX;
      container.scrollLeft = container.scrollLeft +deltaX;
      setStartX((prev)=>event.clientX)
      let scrollCandle=container.scrollLeft/3
      let thatMinPrice=Math.min(...data.slice(scrollCandle,scrollCandle+howCandleInRange).map((d)=>Number(d[3])));
      let thatMaxPrice=Math.max(...data.slice(scrollCandle,scrollCandle+howCandleInRange).map((d)=>Number(d[2])));
      let priceRange = thatMaxPrice - thatMinPrice;
      if(thatMaxPrice!==maxPrice || thatMinPrice!==minPrice){
        if(ctx && refCanvas.current){
          ctx.clearRect( 0 , 0 , refCanvas.current.width , refCanvas.current.height  );
          DrawCandleFunc(ctx,data,data.length*3-30,3,thatMaxPrice,priceRange,refCanvas.current.height-40)
          setMaxPrice(()=>thatMaxPrice)
          setMinPrice(()=>thatMinPrice)
        }
      } 
    }
}
const handleMouseUp=(event:MouseEvent) =>{
    event.preventDefault();
    setStartX(0)
    setIsPressed(false)
    console.log('up')
    if(container){
            container.style.cursor='crosshair'
    }
}
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);
      if(container){
        container.removeEventListener('mousedown', handleMouseDown as  any)
        container.removeEventListener('mousemove', handleMouseMove as  any)
        container.removeEventListener('mouseup', handleMouseUp as  any)
      }
    };
  }, [container,data]);
  useEffect(()=>{
    if(refCanvas.current && refCanvasCrossHair.current){
      const ctx=refCanvas.current.getContext('2d')
      const ctx2=refCanvasCrossHair.current.getContext('2d')
      if(ctx && data.length!==0 && ctx2 && container){
          let candles=Math.round(container.clientWidth/3)
          if(data.length<candles){
            setHowCandleInRange((prev)=>data.length)
          }else{
            setHowCandleInRange((prev)=>candles)
          }
          let thatMinPrice=Math.min(...data.slice(data.length-howCandleInRange,data.length).map((d)=>Number(d[3])));
          let thatMaxPrice=Math.max(...data.slice(data.length-howCandleInRange,data.length).map((d)=>Number(d[2])));
          setMaxPrice(()=>thatMaxPrice)
          setMinPrice(()=>thatMinPrice)
          ctx.clearRect( 0 , 0 , refCanvas.current.width , refCanvas.current.height  );
          CanvasStart(ctx,refCanvas.current,ctx2,refCanvasCrossHair.current,data,refContainer, thatMaxPrice, thatMinPrice,)
      }
  }
  },[height, width,data,refCanvas,refCanvasCrossHair,howCandleInRange])


return (
    <div className={styles.wrap} ref={refContainer} style={{width: graphicRef.current?.clientWidth ? graphicRef.current?.clientWidth-64 : undefined, height:height}}
    id='main_canvas'
    onMouseDown={(e:MouseEvent)=>handleMouseDown(e)}
    onMouseMove={(e:MouseEvent)=>handleMouseMove(e)}
    onMouseUp={(e:MouseEvent)=>handleMouseUp(e)}
    >
        <canvas width={width} height={height} ref={refCanvas} className={styles.canvas} id='main_canvas'></canvas>
        <canvas ref={refCanvasCrossHair} className={styles.canvas} width={width} height={height} id='crosshair_canvas'></canvas>
    </div>
  )
}

export default MainCanvas

Но этот скролл работает не корректно, если быстро проводишь мышь, то скроллится очень быстро, мне нужно чтобы за движение мыши скролился равный промежуток с одинаковой скоростью, проще говоря плавность