Why does a looping animation in useChain refuse to loop?

I want to have a looping animation triggered by a previous animation. To trigger an animation after one ends, we can use usechain.

However, if I want one of the animations to loop, it just… doesn’t work.

Here’s the sample animation code:

  const blueSpringRef = useSpringRef();
  const pinkSpringRef = useSpringRef();

  const [blueSpring, blueSpringAPI] = useSpring(
    () => ({
      ref: blueSpringRef,
      from: { x: 0 },
      to: { x: 100 },
      config: { duration: 3000 },
    }),
    []
  );

  const [pinkSpring, pinkSpringAPI] = useSprings(
    2,
    (i) => ({
      ref: pinkSpringRef,
      from: { y: 100 },
      to: { y: 200 },
      loop: true,
      delay: 1000 * i,
    }),
    []
  );


  useChain([blueSpringRef, pinkSpringRef], [0, 0.5], 3000);

Making the duration of useChain does not help.

Here’s a codesandbox:
https://codesandbox.io/p/sandbox/happy-fire-dpv9yf