MotionValue animation laggy on reset

[tamtrambrambram]

I'm trying to create Framer carousel with framer-motion lib on React. This one is final result - https://slideshows.framer.wiki/

And there is my code - https://codesandbox.io/s/bug-carousel-framer-motion-65gpcw?file=/src/App.tsx

I'm trying to use useTransform and useSpring are MotionValues to reach that effect.

  const calculatedSlideWidth = 320;

  const [forceUpdate] = useForceUpdate();

  const currentStep = useMotionValue(0);
  const transition = useSpring(currentStep, {
    bounce: 0,
    restSpeed: 0.01,
    restDelta: 0.01,
    duration: 800
  });
  const offset = useTransform(
    transition,
    [0, 1, 2, 3],
    [
      -calculatedSlideWidth * 3,
      -calculatedSlideWidth * 4,
      -calculatedSlideWidth * 5,
      -calculatedSlideWidth * 6
    ],
    { clamp: true, ease: easeIn }
  );

And using this offset value to animate transform: translateX

<motion.ul style={{ x: offset }} className="carousel-stream">

Translation works when currentStep is increasing, but on reset when limit has been reached my animation looks not continues like in final result.

I reset values like this

  useMotionValueEvent(offset, "change", (currentOffset) => {
    if (currentOffset <= -calculatedSlideWidth * 6) {
      currentStep.jump(0);
      offset.jump(-calculatedSlideWidth * 3);
      transition.jump(0);
      forceUpdate();
    }
  });

But on reset, animation is not smooth when you proceed clicking fast on the button next. It seems stuck or laggy.

So my question is, how to fix this transition to get same result like in final result? Or maybe there are other ways to get that with framer-motion?