Code and Result Link

I tried to make a carousel using React hooks and succeed on Desktop browser. But I don't know why it doesn't perform as the same on Mobile browser. It moves like laggy and not soft and smooth.

Full screen for output

you can check any of links to check my problems on Mobile browser. if you guy know why it performs differently on mobile and if you guys know the solution for this, please tell me..

...

const onMouseUp = useCallback(e => {
    const currentPosition = e.clientX || e.changedTouches[0].clientX
    const delta = (currentPosition - swipeInfo.originX) / ref.current.clientWidth * 100
    setSwipeInfo(state => ({
      ...state,
      isSwiping: false,
      transitionX: 0
    }))
    if ( delta < -SENSITIVITY ) {
      if (current === LAST_SLIDES) return
      ref.current.style.transition = 'all 0.3s ease-in-out'
      ref.current.style.transform = `translateX(-${current}00%)`
      setCurrent(current + 1)
    } else if ( delta > SENSITIVITY) {
      if (current === FIRST_SLIDES) return
      ref.current.style.transition = 'all 0.3s ease-in-out'
      ref.current.style.transform = `translateX(-${current - 2}00%)`
      setCurrent(current - 1)
    } else {
      ref.current.style.transition = 'all 0.3s ease-in-out'
    }
  }, [current, swipeInfo.originX])
  
  useEffect(() => {
    if(swipeInfo.isSwiping) {
      document.addEventListener("mousemove", onMouseMove, {capture: true})
      document.addEventListener("mouseleave", onMouseUp, {capture: true})
      document.addEventListener("mouseup", onMouseUp, {capture: true})
      document.addEventListener("touchmove", onTouchMove, {capture: true})
      document.addEventListener("touchend", onMouseUp, {capture: true})
    }
    return () => {
      document.removeEventListener("mousemove", onMouseMove, {capture: true})
      document.removeEventListener("mouseleave", onMouseUp, {capture: true})
      document.removeEventListener("mouseup", onMouseUp, {capture: true})
      document.removeEventListener("touchmove", onTouchMove, {capture: true})
      document.removeEventListener("touchend", onMouseUp, {capture: true})
    }
  }, [swipeInfo.isSwiping])


...

And I didn't write the full codes here bcuz it seems like CSS problems not react and javascript problems

thank you for reading!