Issue to use animation().pause() and animation().play() from useAnimate

[hadikman]

Hi
I don't know the usage of controller is correct or not, because it's not working.
I want when hover over each item the current width animation pause and when hover out continue the animation, also I couldn't use progressAnimation(progressScope.current).cancel() at async resetProgressBar(), so I reset the animation by width: '0%':

function Carousel() {
 // other codes
  const [progressScope, progressAnimation] = useAnimate()

   const progressBarController = {
    async startProgressBar() {
      await progressAnimation(
        progressScope.current,
        { width: '100%' },
        { duration: 3, ease: 'linear' },
      )
      await progressAnimation(
        progressScope.current,
        { width: '0%' },
        { duration: 0 },
      )
    },
    async resetProgressBar() {
      // progressAnimation(progressScope.current).cancel() not working, so I reset it by the value 
      await progressAnimation(
        progressScope.current,
        { width: '0%' },
        { duration: 0 },
      )
    },
  }

  React.useEffect(() => {
    // other code
      progressBarController.startProgressBar()
  }, [has dependency])

   // other code: use progressBarController.resetProgressBar() into next/previous carousel handler

  return (
    <div className="relative isolate grid h-36 w-sm overflow-hidden">
          <div className="z-0 grid h-36 w-sm overflow-hidden text-4xl font-bold text-slate-900 italic">
            {SLIDES.map((item, idx) => <motion.div
                  key={idx}
                 // other codes
                  onHoverStart={async () =>
                    progressAnimation(progressScope.current).pause() // Doesn't work
                  }
                  onHoverEnd={async () =>
                    progressAnimation(progressScope.current).play() // Doesn't work
                  }
                >
                  {item}
                </motion.div>}
          </div>

          <motion.div ref={progressScope}  initial={{ width: '0%' }} />
    </div>
  )
}

Thank you in advance