GSAP ScrollTrigger start and end points does not work properly on initial rendering of that component

Question

i am initializing a ScrollTrigger for two div , i want to make that div pin. But when i first render that component , start and end points are not properly aligned as they are mentioned in my code. I specified my start points to 'top top' but when it render first time it , shifts down to original position. but if i refresh my screen, it get properly aligned. how to solve this?

My component code

  useGSAP(() => {
      const svgPath = document.querySelector("#animated-path");
      const containerWidth =
        document.querySelector(".main-container").offsetWidth;
      let timeline = gsap.timeline({
        scrollTrigger: {
          trigger: ".main-container",
          pin: true,
          scrub: 1,
          start: "top 2px",
          end: () => "+=" + containerWidth,
          invalidateOnRefresh: true,
          onUpdate: (e) => {
            const { progress } = e;
            if (progress >= 0.050366 && progress <= 0.072146) {
              gsap.to(".content-2", {
                opacity: 1,
              });
            } else if (progress >= 0.1002 && progress <= 0.1190576) {
              gsap.to(".content-3", {
                opacity: 1,
              });
            } else if (progress >= 0.19696 && progress <= 0.226419) {
              gsap.to(".content-4", {
                opacity: 1,
              });
            } else if (progress >= 0.3194791 && progress <= 0.4028214) {
              gsap.to(".content-5", {
                opacity: 1,
              });
            } else if (progress >= 0.4087689 && progress <= 0.4146) {
              gsap.to(".content-6", {
                opacity: 1,
              });
            } else if (progress >= 0.6682406) {
              gsap.to(".content-7", {
                opacity: 1,
              });
            }
          },
        },
      });

      gsap.to(".content-1", {
        opacity: 1,
        duration: 1,
        scrollTrigger: {
          trigger: ".main-container",
          start: "top 50%",
        },
      });

      timeline
        .fromTo(
          svgPath,
          { strokeDasharray: "0, 1" },
          { strokeDasharray: "1, 1", duration: 3 },
          "-=2"
        )
        .to(
          ".main-container",
          {
            xPercent: -60,
            ease: "none",
            duration: 3,
          },
          "<"
        )
        .to(
          ".main-container",
          {
            scaleX: 0.96,
            scaleY: 0.96,
            duration: 1,
          },
          "label"
        )
        .to(
          ".home-arrow-svg-container",
          {
            top: "-60vh",
            ease: "power1.inOut",
            duration: 0.6,
          },
          "label"
        );
      gsap.fromTo(
        ".svg-title",
        {
          scale: 0.7,
          y: 200,
        },
        {
          scale: 1,
          y: -200,
          duration: 2,
          ease: "power1.inOut",
          scrollTrigger: {
            trigger: ".svg-title-container",
            scrub: 1,
            top: "top 10px",
          },
        }
      );
  }, []);

When i open the start and end points should properly aligned but in the first rendering it does not calculate it properly. In above project i used react React Lenis for slowScroll here is the layout file . for reference purpose only.

const Layout = () => {
  const [isLoading, setIsLoading] = useState(true);

  const handleLoader = () => {
    setIsLoading(false);
  };
  return (
    <ReactLenis
      root
      options={{
        lerp: 0.045, // Controls the interpolation (higher values make scroll slower)
      }}
    >
      <>
        {isLoading ? (
          <Loader onComplete={handleLoader} />
        ) : (
          <div>
            <MyComponent/>
          </div>
        )}
      </>
    </ReactLenis>
  );
};