'How to animate an object along an SVG path React-Spring

I'm trying to animate an circle in an svg along a path using react-spring but im not sure how to go about it.

I know I need the ref on the path so I can get the total length of the path and then use getPointAtLength to get the x and y to move the circle along it but I cant seem to figure out how to do this in react-spring

Heres a codesandbox of where im at so far

https://codesandbox.io/s/unruffled-mclean-0jznxi?file=/src/App.js



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source