[bug]: useChain with multiple useSpring hooks not respecting the animation order

[vctormb]

Which react-spring target are you using?

• [X] @react-spring/web
• [ ] @react-spring/three
• [ ] @react-spring/native
• [ ] @react-spring/konva
• [ ] @react-spring/zdog

What version of react-spring are you using?

9.7.3

What's Wrong?

I'm trying to use two useSpring hooks to animate two different elements. I want to execute the spring animations in sequence using useChain. The problem is that the second animation is being executed simultaneously with the first one. It doesn't wait the first one to end.

  const blackSquareRef = useSpringRef();
  const blackSquareStyles = useSpring({
    ref: blackSquareRef,
    from: {
      transform: "scale(0.1)"
    },
    to: {
      transform: "scale(1)"
    },
    config: {
      duration: 800
    }
  });

  const squareRef = useSpringRef();
  const squareStyles = useSpring({
    squareRef,
    from: { background: "#ff6d6d", y: -40, x: 0 },
    to: [
      { x: 80, background: "#fff59a" },
      { y: 40, background: "#88DFAB" },
      { x: 0, background: "#569AFF" },
      { y: -40, background: "#ff6d6d" }
    ],
    loop: true
  });

  useChain([blackSquareRef, squareRef], [0, 0.9]);

To Reproduce

Open codesandbox and the black square together with the one in movement will start together.

Expected Behaviour

To execute the animations in sequence

Link to repo

https://codesandbox.io/s/react-spring-async-animation-bug-6g66wt?file=/App.js