React Router Link brakes the website if clicked while is animated

Question

I've implemented a horizontal scroll animation using gsap for a projects section, but I've run into an issue. When I click on a project that is currently being animated by gsap, my entire portfolio breaks. The Link tag from React Router does change the URL, but the component from the Route element is not rendered, leaving me with a blank page.

I do use locomotiveScroll and I also created a custom hook to make locomotiveScroll work with gsap's ScrollTrigger. Could this be because locomotiveScroll gets confused when React Router changes routes and keeps the "page" in the same position, a position that might not exist on the second page? Did anyone else have the same problem? I would greatly appreciate any advice or guidance on how to resolve this issue. Thank you.

P.S. I do not get any errors in the console.

Here is some code that may help

            <Link
              to={`/projects/${project.id}`}
              className={styles.link}
              id='link'
            >
              <div
                id='projectImageContainer'
                className={styles.projectImageContainer}
                onMouseEnter={() => setHover(true)}
                onMouseLeave={() => setHover(false)}
              >
                {/* <AnimatedImage src={project.image} playAnim={hover} /> */}
              </div>
            </Link>

useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const scrollContext = gsap.context(() => {
      scrollTl.current = gsap.timeline({
        scrollTrigger: {
          trigger: projectsContainerRef.current,
          scroller: '.App',
          start: 'top top',
          end: `+=${trackRef.current.offsetWidth}`,
          pin: true,
          scrub: 0.5,
        },
      });

      scrollTl.current
        .to(trackRef.current, {
          xPercent: -100,
          ease: 'none',
        })
        .to(
          titleRef.current,
          {
            xPercent: -50,
            ease: 'none',
          },
          '<'
        );
    });

    return () => scrollContext.revert();
  }, []);