Weird behavior on swipe gesture with react-spring

Question

In a PWA that I'm working on, I'm having troubles setting up @use-gesture/react and @react-spring/web to play nicely together. I have a list of articles on a page and want the user to be able to swipe articles slightly to the left to mark them as relevant or slightly to the right to mark them as irrelevant.

The swiping movement should be bound and have a rubber-band effect. Here is what I did:

import { animated, useSpring } from "@react-spring/web";
import { useDrag } from "@use-gesture/react";

// ...

function Item({ article }: ItemProps) {
  const [{ x }, api] = useSpring(() => ({ x: 0 }));

  const bind = useDrag(
    ({ down, movement: [mx] }) => {
      api.start({ x: down ? mx : 0, immediate: down });
    },
    { axis: "x", rubberband: true, bounds: { left: -100, right: 100 } }
  );

  return (
    <animated.div {...bind()} style={{ x, touchAction: "pan-y" }}>
      <ArticleItem
        mt="md"
        article={article}
        onClick={() => router.navigate(`/engineering-article/${article.id}`)}
      />
    </animated.div>
  );
}

But this doesn't work as expected. The initial swipe-left or swipe-right on an article item produces the desired result. But then when repeating the exact same swipe again, it behaves as if it was bound at 0 in that direction. I have to swipe to the other side to reactivate normal swipe to the initial direction. And vice versa.

Here is what I mean:

What is going on and how should I fix this? Thanks!