Yeah, I was... Because in my head this should be read only once, that's why I'm not understanding why the demo works by calling refresh() on all ScrollTriggers right after the creation of the animation did the trick in the demo - I was not using the strict mode anyway.
Great! I think my problem was just not being sure how to properly call it, because apparently the <ScrollRestoration /> component was only scrolling up after the render.
I just updated the demo to reproduce the error I was talking about - just go to the second page, scroll down a fair amount and navigate back to the first page. It will be scrolled up, but the background color will be incorrect. There I also left some comments to my final best solution and to calling ScrollTrigger.refresh() after the creation of the animations, that somehow works in the demo (not my project though). It's also good to know that nesting these tweens is a bad idea... It wasn't what was causing this specific problem, but I'm not doing that again - thank you (and @elegantseagulls)!
Yeah, thanks! But I wasn't happy with that solution, because I was probably losing performance with the useEffect(), so I replaced that solution for having another useLayoutEfect() to scroll up whenever the path changes before the creation of the animations, in the same component - that's the solution that is currently in the demo btw.
Well, by the end of the day I guess the solution to my problem was understanding better how React renders all components and when GSAP enters the process. I'm sorry if that is not the goal of this forum and for wasting everyone's time.
Marcelo Jr.'s post in ScrollTrigger + React Router v6.6 scroll restoration issue was marked as the answer