GSAP Scrolltrigger PIN not working properly in nextjs

From my code below, If I comment out the pin: true property, the code works normally but the container that wraps the sections I expect to scroll horizontally are not sticky to the top. If I uncomment the pin: true, all the container (trigger) will not be visible.

Any suggestions on how to resolve this issue will be greatly appreciated.

import React, { useEffect } from "react";
import OverlayMenu from "./OverlayMenu";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";

function MainContent({ overlayRef }) {
  gsap.registerPlugin(ScrollTrigger);
  useEffect(() => {
    // alert(document.querySelector(".main__content").offsetWidth)
    const sections = gsap.utils.toArray(".section");
    gsap.to(sections, {
      xPercent: -100 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".main__content",
        scrub: 1,
        markers: true,
        start: "top top",
        // // snap: 1 / (sections.length - 1),
        end: "+=" + document.querySelector(".main__content").offsetWidth,
        pin: true,
      },
    });
  }, []);

  return (
    <div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
      <div className="w-full relative h-screen">
        <OverlayMenu overlayRef={overlayRef} />
        {/* <div className="w-full h-screen bg-black"></div> */}
        <div className="main__content w-[300%] bg-purple-700 h-screen flex  flex-nowrap">
          <div className="section w-full h-screen- bg-red-500">1</div>
          <div className="section w-full h-screen- bg-blue-500">2</div>
          <div className="section w-full h-screen- bg-yellow-500">3</div>
        </div>
      </div>
    </div>
  );
}

export default MainContent;

Step back the version to 3.8.0

yarn add gsap@3.8.0

OR

npm install gsap@3.8.0

You can read more here:
https://greensock.com/forums/topic/30747-scrolltrigger-in-nextjs-build-not-working-reliably/#comment-153675

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React, { useEffect, useState } from "react";
import OverlayMenu from "./OverlayMenu";
import { gsap } from "gsap";
import ScrollTrigger from "gsap/dist/ScrollTrigger";
function MainContent({ overlayRef }) {
gsap.registerPlugin(ScrollTrigger);
const [hasRendered, setHasRendered] = useState(false);
useEffect(() => {
// ******This will set the state of hasRendered when the page render so as to keep track of the rendering steps *******
setHasRendered(true);
}, []);
useEffect(() => {
// ******* I added the conditional statement here to only create the instance of the gsap timeline ONLY after the page has rendered*******
if (hasRendered) {
// alert(document.querySelector(".main__content").offsetWidth)
const sections = gsap.utils.toArray(".section");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".main__content",
scrub: 1,
markers: true,
start: "top top",
// // snap: 1 / (sections.length - 1),
end: "+=" + document.querySelector(".main__content").offsetWidth,
pin: true,
},
});
}
}, [hasRendered]); //******** Dont forget the dependencies array too */
return (
<div className="main__content__wrapper w-[calc(100%_-_80px)] h-screen ml-20">
<div className="w-full relative h-screen">
<OverlayMenu overlayRef={overlayRef} />
{/* <div className="w-full h-screen bg-black"></div> */}
<div className="main__content w-[300%] bg-purple-700 h-screen flex  flex-nowrap">
<div className="section w-full h-screen- bg-red-500">1</div>
<div className="section w-full h-screen- bg-blue-500">2</div>
<div className="section w-full h-screen- bg-yellow-500">3</div>
</div>
</div>
</div>
);
}
export default MainContent;

<!-- end snippet -->