Why my setPin in scrollMagic don't pin in react but in normal html it works properly?

Question

I have a problem in reactjs wherein My setPin don't work properly in reactjs but in normal html it works properly... Basically the code was something like this in normal html

const controller = new ScrollMagic.Controller()

const tl = new TimelineMax()

const boxes = document.querySelectorAll('.box-screener')
const slides = document.querySelectorAll('.landslide')

new ScrollMagic.Scene({
    triggerElement:".falling-categories-absolute",
    triggerHook:0,
    duration:"100%"
})
.setPin('.falling-categories-absolute')
.addTo(controller)

boxes.forEach((elem,i) => {
    tl.fromTo(elem,0.5,{opacity:0,x:'30%'},{opacity:1,x:"60%"})
    const scene1 = new ScrollMagic.Scene({
        triggerElement:".falling-categories-absolute",
        triggerHook:"onLeave",
        duration:"100%",
    })
    .setTween(tl)
    .addTo(controller)
})

const tl3 = new TimelineMax()

tl3.fromTo('.products-title h2',
1,
{
    width:'0px'
},
{
    width:'300px'
})
const scene3 = new ScrollMagic.Scene({
    triggerElement:".falling-categories-absolute",
    triggerHook:"onLeave",
    duration:'100%'
})
.setTween(tl3)
.addTo(controller)


const tl2 = new TimelineMax()
tl2.fromTo(slides,1,
    {width:'0%'},
    {width:"5.1%",
        stagger:{
            each:0.05,
            from:"left"
        }
    }
)

const scene2 = new ScrollMagic.Scene({
    triggerElement:".falling-categories-absolute",
    triggerHook:"onLeave",
    duration:"100%",
})
// .setPin('.falling-categories-absolute')
.setTween(tl2)
    .addTo(controller)

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
}
body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: baseline;
}

.home {
    position: relative;
    /* overflow: hidden; */
    display: block;
    height: 100%;
}

.LowerBound {
    width: 100%;
    height: 100vh;
    background: rgba(128, 128, 128, 0.233);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.falling-categories {
    display: block;
    width: 100%;
    height: 100%;
}

.falling-categories-absolute {
    /* width: 100%; */
    z-index: 1;
    background: black !important;
    height: 100vh;
    position: relative;    
    overflow: hidden;
    box-sizing: border-box;
}
.products-title {
    position: absolute;
    top: 30%;
    left: 20%;
    color:white;
    z-index: 1000;
    font-size: 45px;
    font-style: italic;
    /* background: saddlebrown; */
}
.products-title h2 {
    /* width: 300px; */
    position: relative;
}
.products-title h2::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: white;
    bottom: 0;
    left: 0;
}

.landslide {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 100%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(2) {
    left: 5%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(3) {
    left: 10%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(4) {
    left: 15%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(5) {
    left: 20%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(6) {
    left: 25%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(7) {
    left: 30%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(8) {
    left: 35%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(9) {
    left: 40%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(10) {
    left: 45%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(11) {
    left: 50%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(12) {
    left: 55%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(13) {
    left: 60%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(14) {
    left: 65%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(15) {
    left: 70%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(16) {
    left: 75%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(17) {
    left: 80%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(18) {
    left: 85%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(19) {
    left: 90%;
    background: rgb(141, 141, 141);
}
.landslide:nth-child(20) {
    left: 95%;
    background: rgb(141, 141, 141);
}

.whole-box {
    width: 100%;
    height: 100%;
    /* background: yellow; */
}

.box-screener {
    position: absolute;
    width:400px;
    height:300px;
    top: 25%;
    left: 25%;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.box-screener:nth-child(2) {
    width: 400px;
    left: 55%;
}
.box-screener:nth-child(3) {
    top: 55%;
    left: 30%;
}

.box-screener:nth-child(4) {
    left: 60%;
    top: 55%;
} 

.box-screener img {
    width: 100%;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js" integrity="sha512-RvUydNGlqYJapy0t4AH8hDv/It+zKsv4wOQGb+iOnEfa6NnF2fzjXgRy+FDjSpMfC3sjokNUzsfYZaZ8QAwIxg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TimelineMax.min.js"></script>
    <title>Document</title>
</head>
<body>
    <section>
        Scroll Down
    </section>
    <div class='home'>
        <div class="falling-categories">
            <div class="falling-categories-absolute">
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>
                <div class="landslide"></div>

                <div class="products-title">
                    <h2> Products </h2>
                </div>

                <div class="whole-box">
                    <div class="box-screener">
                        <img src="../Introduction/img/1.jpg" alt="" />
                    </div>
                    <div class="box-screener">
                        <img src="../Introduction/img/1.jpg" alt="" />
                    </div>
                    <div class="box-screener">
                        <img src="../Introduction/img/1.jpg" alt="" />
                    </div>
                    <div class="box-screener">
                        <img src="../Introduction/img/1.jpg" alt="" />
                    </div>

                </div>
            </div>
        </div>
        <div class="LowerBound">

        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

IN THIS CODE THE SETPIN WAS WORKING VERY WELL AT IN JAVASCRIPT but when I try it in reactjs the setPin is like something going in first-out then it will stop for a moment..I mean like it is not really pin in that section while I'm scrolling but something's bug in here when I try to remove the setPin() and the duration at the part of where setPin() and then get it back..It will work but when I reload it..it will not be setPin anymore the item. Here is the code to briefly understand it.

import React, { useEffect, useLayoutEffect } from 'react'
import img from './images/Apple-Logo.png'
import ScrollTrigger from 'gsap/ScrollTrigger'
import ScrollMagic from 'scrollmagic'
import {Power3,gsap,TweenMax, TimelineMax} from 'gsap'
import { ScrollMagicPluginGsap } from "scrollmagic-plugin-gsap";

import a1 from './images/a1.png'
import a2 from './images/a2.png'
import a3 from './images/a3.png'
import a4 from './images/a4.png'

function Home() {

    useEffect(() => {
        ScrollMagicPluginGsap(ScrollMagic, TweenMax, TimelineMax)
        const controller = new ScrollMagic.Controller()

        const tl = new TimelineMax()
        
        const boxes = document.querySelectorAll('.box-screener')
        const slides = document.querySelectorAll('.landslide')
        
        new ScrollMagic.Scene({
            triggerElement:".falling-categories-absolute",
            triggerHook:0,
            duration:"100%"
        })
        .setPin('.falling-categories-absolute')
        .addTo(controller)

        boxes.forEach((elem,i) => {
            tl.fromTo(elem,0.5,{opacity:0,x:'30%'},{opacity:1,x:"60%"})
            const scene1 = new ScrollMagic.Scene({
                triggerElement:".falling-categories-absolute",
                triggerHook:"onLeave",
                duration:"30px",
            })
            .setTween(tl)
            .addTo(controller)
        })

        const tl3 = new TimelineMax()
        
        tl3.fromTo('.products-title h2',
        1,
        {
            width:'0px'
        },
        {
            width:'300px'
        })
        const scene3 = new ScrollMagic.Scene({
            triggerElement:".falling-categories-absolute",
            triggerHook:"onLeave",
            duration:'30px'
        })
        .setTween(tl3)
        .addTo(controller)

        
        const tl2 = new TimelineMax()
        tl2.fromTo(slides,1,
            {width:'0%'},
            {width:"5.1%",
                stagger:{
                    each:0.05,
                    from:"left"
                }
            }
        )

        const scene2 = new ScrollMagic.Scene({
            triggerElement:".falling-categories-absolute",
            triggerHook:"onLeave",
            duration:"50px",
        })
        // .setPin('.falling-categories-absolute')
        .setTween(tl2)
            .addTo(controller)

            

    },[])
    
    return (
        <div className='home'>
            <div className="falling-categories">
                <div className="falling-categories-absolute">
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>
                    <div className="landslide"></div>

                    <div className="products-title">
                        <h2> Products </h2>
                    </div>

                    <div className="whole-box">
                        <div className="box-screener">
                            <img src={a1} alt="" />
                        </div>
                        <div className="box-screener">
                            <img src={a2} alt="" />
                        </div>
                        <div className="box-screener">
                            <img src={a3} alt="" />
                        </div>
                        <div className="box-screener">
                            <img src={a4} alt="" />
                        </div>

                    </div>
                </div>
            </div>
            <div className="LowerBound">

            </div>
        </div>
    )
}

export default Home

as you can see the setPin() in the near part top of useEffect() and the CSS is still the same as in the react..I just add some section on it.. but yeah here's my problem.. I don't know why the behaviour is something like..Is it like a bug or the support of the scrollMagic in reactjs is insufficient? Any help please I'm so done with this I don't know why it is acting very weird.