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
This was a confirmed bug in react-spring. It is fixed in v9