Javascript – animating snowing in REACT and GSAP

I’ve got parent component generating x "snowflake" components. Each of the snowflakes has its own ref attributes, that invokes "animatesnowflake" within useEffect hook. The animation function itself, has some dynamic values, however both starting Y and gsap.to y values are the same for each snowflake ( when not animating snowflakes are set in the same Y position on the webpage). Not sure why, but gsap is not animating correctly as some y values are starting as expected, some are playing half of the animation, some are starting in the wrong Y point, anybody knows why gsap is "freakin out" here? Below is the code for parent component:

export default function Snow() {
    let l = 50;
    let arr = new Array(l);
    for( let i = 0; i < l; i++){
        i%2 === 0 ? arr[i] = 0 : arr[i] = 1
    }

 const animateSnowflake = (el)=>{
        let h = window.innerHeight;
        let w = window.innerWidth;
        let delay = gsap.utils.random(1, 5, 1);
        let duration = gsap.utils.random(3, 8, 1);
        let startX = gsap.utils.random(0, w, 1);
        let startY = -200;
        let y = h;
        let x = gsap.utils.random(startX-5, startX+5, 1)
        let s = gsap.utils.random(0.5, 1, 0.1)

        let tl = gsap.timeline();
        tl.set(el, {
            y: startY,
            x: startX,
            scale: 1
        })
        console.log(y)
        tl.to(el, {
            y: y+200,
            scale: s*3,
            duration: duration,
            delay: delay,
            ease: 'none',
            repeat: -1

        })
    }

   return (
        <div className = 'Snow'>

            {arr.map(el=>{
                if(el === 1) return <Snowflake1 animateSnowflake = {animateSnowflake}/>;
                return <Snowflake2  animateSnowflake = {animateSnowflake}/>
            })}

        </div>
    )
}

And here’s code for 1 of the snowflakes ( only differencce between 1 and 2 is svg ):

export default function Snowflake2({animateSnowflake}) {
    const ref = useRef(null);

    useEffect(() => {
        animateSnowflake(ref.current)
    }, []);
    return (
        <div ref = {ref}>
            <svg 
            </svg>
        </div>

    )
}