[bug]: Browser freeze with prop change in nested animations

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.4.2

What's Wrong?

I have an animated loop rotating a container, contained in an animated loop moving the container.

The animation sometimes randomly freezes the browser, which prompts me to stop the webpage.The console indicates the script got stopped in the flushUpdate method.

To Reproduce

See codesandbox. Doesn't freeze every time, but if you click the box a couple of times it should freeze.

I think the root cause is that there is an outer animation, with an inner animation that has a loop. I tried splitting the animated.div component in two separate nested components, one for the translation and one for the rotation, but the result is the same: browser ends up freezing.

Tried on Firefox only.

Expected Behaviour

Browser should never freeze.

Link to repo

https://codesandbox.io/s/interesting-raman-p8y5j?file=/src/index.js

Reproduce the freeze from the linked CodeSandbox, starting with src/index.js and the nested loop animations described in the report. Inspect the flushUpdate path indicated by the console and verify behavior in Firefox after clicking the box repeatedly. Done means repeated interaction no longer freezes the browser.