Re-rendering a component with useSpring resets animation chain and over time makes other animations staggery

Question

I have this spring defining a looped animation:

const style = useSpring({
    from: { marginBottom: 0 },
    to: [
      { marginBottom: 0 },
      { marginBottom: 80, config: { duration: 600 }, delay: 3000 },
      { marginBottom: -80, config: { duration: 0 } },
      { marginBottom: 0, config: { duration: 600, delay: 1000 } },
    ],
    loop: true,
  })

My problem is that whenever I re-render the component containing the spring, the animation 'resets' and starts moving towards the first to position (in this case { martinBottom: 0 })

• It can be seen in this sandbox - click the 'reset' button just as the arrow is traveling up and it will reverse course instantly

• The documentation also hints that stabilizing the references of from and to may solve the issue... and it kind of does, but it introduces a new one: if the components re-renders shortly before the animation starts, it skips the 'travel up' portion: sandbox here.

The bigger problem is that the more times I 'interrupt' the animation cycle by re-rendering, the more it affects some of my other, more demanding animations, making them more and more staggered.

• Refreshing whole app instantly resets this decay and makes all animations fluid again. When I remove this useSpring from my code, this decay disappears

So what is going on there? Is there something I'm missing?

From this docs example, It makes sense to me that the animation resets on re-render ... but then why does this example instruct me to compose staged animations this way, am I missing some key step?

And what's up with this slow 'decay' of other animations' performance, is that a known cause to that?