[Not able to pin section on Scroll]

What i need is i want to pin the red section until scrolling inside the blue section. But it is not working properly getting blinking effect.

Using next js

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

    ScrollTrigger.create({
      trigger: '.sect',
      start: 'top top',

      // pinType: 'fixed',
      pin: true,
      // preventOverlaps: true,
      endTrigger: '.section4',
      markers: true
    });
  });

 

 

JSX Code

<div className="relative bg-[#0093e8b8]">

        <Object3d /> #red color section

        <div className="h-screen  section2"></div>

        <div className="h-screen  section3"></div>

        <div className="h-screen  section4"></div>

      </div>