React+GSAP When using ScrollTrigger with MotionPath on mobile the element starts going back before scroll reaches bottom path

Question

I'm using GSAP on React, making an animation with ScrollTrigger and MotionPath, I need the coin to follow the SVG path scrolling down from start to end and then go back when scrolling up. While the coin is on the path needs to always be on screen (ideally center), until the end and then stop there, only going up again when scrolling up from the bottom. Nothing too special really.

My animation is almost there, but I'm having a problem at the end, the coin starts going back up before you scroll past the bottom of the path, and I need for it to stay there. I think if I set the scroll end to the size of the SVG (4000) then it should work like that, but when I do that the coin starts going faster in the middle and goes offscreen, so in order for it to stay onscreen while scrolling down the path I had to set the end to 7500. I don't know how to make both things work

Here is a codesandbox with what I've been trying, my code so far

https://codesandbox.io/s/dark-fast-bu7bgu?file=/src/App.js&resolutionWidth=526&resolutionHeight=675T

Thank you!