useTransition doesn't animate while cycling through an array

I created a little example on codesandbox to reproduce it.

https://codesandbox.io/s/infallible-swirles-cbx74

I can easily cycle through the items array thanks to the following useEffect

useEffect(() => {
  // taking the first element of the array and placing it at its end
  const h = () => set(items => [...items.slice(1), items[0]])

  setInterval(h, 2000)

  return () => {
    clearInterval(h)
  }
}, [])

The problem is that I cannot find a way to have these animate. I think it might probably be related to the keys but I cannot figure out how I can fix this.

Please check the codeSandbox link to understand what the problem is and to view the full example code.

Solution

I eventually made something simpler without react-spring. It's almost 100% CSS based (I use a JS interval to trig changes over time)

https://codesandbox.io/s/practical-fog-ubdhn?file=/src/App.js

The animations are not perfect in this example but I could find a way to work around these minor glitches by hiding the first and last elements with a visibility attribute so the first element cycling back to the last position doesn't animate over the rest. Could be achieved with dynamic z indices but it wasn't the purpose of this sandbox just to show the main approach I used.

I hope this helps people landing here :)