react-spring useSprings does not animate as aspected

Question

I am using react-spring v9.7.3 in Next.js 13.4. My problem is the following code snippet:

const [springs] = useSprings(
  5,
  (i: number) => {
    // Increase
    if (i + 1 === counter && prevCounter && prevCounter < counter) {
      return {
        from: { transform: 'translateX(-5000px)' },
        to: { transform: 'translateX(0)' },
      };
    }

    // Decrease
    if (i + 1 > counter) {
      return {
        from: { transform: 'translateX(0)' },
        to: { transform: 'translateX(-5000px)' },
      };
    }

    // Initial & Reset
    const delay = [500, 400, 300, 200, 100]; // reverse order, so the first Card is the last one to animate
    return {
      from: { transform: 'translateX(-5000px)' },
      to: { transform: 'translateX(0)' },
      delay: delay[i],
    };
  },
  [counter, prevCounter]
);

The initial and reset, as well as the increase, work as expected. My cards that I want to show fly in from the right side. However, the decrease does not work as expected, it just pops away.

Interesting: if i change the to for teh decrease to transform(translateX(5000px)), all the other animations are also beginning from 5000px. So the cards fly in from the right instead left. But the decrease doenst change, it still wont work..

I am expecting that the card will fly from its current position (transform(translateX(0))) to transform(translateX(-5000px)).