[bug]: useTransition stuck in loop when not using an empty array

[Camsteack]

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.5

What's Wrong?

Hi, so I don't know if it's a bug or if I am doing something wrong but I cannot get useTransition to work properly if I am animating between two items array and one of them is not null. I have reused the example provide by the react spring website and changed it to fit my use case.
Please let me know if I am doing something wrong.

Many thanks for your amazing library.

Cheers

To Reproduce

Click on the square to trigger the animation.
Click again to trigger the reverse one
The animation will be stuck in a loop

Expected Behaviour

Both animation should complete properly

Link to repo

https://codesandbox.io/s/sleepy-andras-bx4q3w?file=/src/App.tsx

[joshuaellis]

If you add the key prop to the useTransition props then I believe it fixes the issue:

key: (item) => item.name,

[Camsteack]

It does indeed work ! Thanks a lot @joshuaellis !
I still struggle to understand why, would anyone be able to clarify, cause ready the documentation it says:

All elements in the fragment are guaranteed to have a key prop, whether or not you define one explicitly. Unkeyed elements will use the ctrl.id from their Transition object.

Which is why it did not occur to me

Cheers