I am trying to reproduce an effect in GSAP animation which is written in html to react.

Here is the link

https://codepen.io/GreenSock/pen/QEdpLe

The problem is that in normal javascript unlike react. GSAP can access the dom element by given classname.

gsap.to(".box", {...})

box can be multiple items.

But in react to get the data I need to use useRef hook. So I am giving a reference to the parent component and animating the children elements.

    let boxAnimate = (selectedEl) => {
    gsap.to(selectedEl.current.children, {
      duration: 10,
      ease: "none",
      x: "-=600", //move each box 500px to right
      modifiers: {
        x: gsap.utils.unitize((x) => parseFloat(x) % 600), //force x value to be between 0 and 500 using modulus
      },
      repeat: -1,
    });
  };

    gsap.set(inifiteRef.current.children, {
      backgroundColor: (i) => colors[i % colors.length],
      x: (i) => i * 50,
    });
    boxAnimate(inifiteRef);
  }, []);

But its is not giving me the desire effect.

My desire effect. When the number disappear into the finish line it should appear back from the start.

What happening - All number disappear and all appear again.

           <div
              style={{
                color: "red",
                fontSize: "40px",
                height: "50px",
                width: "600px",
                overflow: "hidden",
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
              }}
              ref={inifiteRef}
            >
              <div style={{ width: "50px" }}>1</div>
              <div style={{ width: "50px" }}>2</div>
              <div style={{ width: "50px" }}>3</div>
              <div style={{ width: "50px" }}>4</div>
              <div style={{ width: "50px" }}>5</div>
              <div style={{ width: "50px" }}>6</div>
              <div style={{ width: "50px" }}>7</div>
            </div>

Is there anything wrong with my code?