[selector on mapped array in next js doesnt trigger animation]

const MARQUE_DATA = ["WEBSITE", "AR", "MOBILE APP", "IOT", "VR"];

const Marquee = ({ data }: { data: string[] }) => {
  const wrapper = useRef<HTMLDivElement>(null);
  const inner = useRef<HTMLDivElement>(null);
  const q = gsap.utils.selector(inner);

  useEffect(() => {
    gsap.to(q("span"), {
      x: 500,
      duration: 8,
      repeat: -1,
    });
  }, []);

  return (
    <div ref={wrapper} className={styles.marqueeWrapper}>
      <div ref={inner} className={styles.marqueeInner}>
        {data.map((text, i) => (
          <span key={i}>
            {text} |
          </span>
        ))}
      </div>
    </div>
  );
};

the rendered span doesnt animate if i use map like the code above, but when i try to hardcode the spans like 

      <span>FOO</span>
      <span>BAR</span>
      <span>BEAR</span>

this it does work as expected. any help apreciated !