Why is my react-spring desyncing?

[Turmolt]

I am trying to do a simple animation with react-three-fiber and react-spring where there are a bunch of 3d objects in a grid, and each one scales up when hovered/selected and back to normal when it is not hovered/selected. This was working when I was just setting the mesh scale to the min or max value on the corresponding interactions.

When I implemented spring, the values started to desync from what they should be. If you quickly mouse over the boxes in the example below you will see what I mean.
https://codesandbox.io/s/r3f-rs-bug-zrlvd

I am very new to the react ecosystem so I am hoping that I am just doing something wrong, but when I compare my setup to a working example, I can't figure out what I could be doing incorrectly.

Working mouse over script:
https://codesandbox.io/s/9y8vkjykyy

I could just create my own tween system that eases between the values but I would love to get react-spring to play nicely.

Any input would be appreciated

[Turmolt]

If I change the spring to use a float instead of an array, the desync is fixed. Is this a react-spring bug?

[mattrossman]

Seems like it was a react-spring bug but it's fixed in react-spring v9.
You can update by swapping the react-spring dependency for @react-spring/three and importing from @react-spring/three