I have a field of squares. Each square is a react component.

const SquareInit = ({ isRotated, className }: SquareProps) => {
  const classes = clsx({
    [s.square]: true,
    [s.rotated]: isRotated,
    [className]: !!className,
  });

  return <div className={classes} />;
};

export const Square = memo(SquareInit);

Squares are rendered in field component via map function in this way:

<div className={s.game} style={style} ref={gameRef}>
      {field.flat().map((isRotated, key) => (
        <Square
          className="sq"
          key={key}
          index={key}
          isRotated={isRotated}
          onClick={handleSquareClick}
        />
      ))}
    </div>

I am trying to animate square with useGSAP in this way
const gameRef = useRef(null);

  useGSAP(() => {
    gsap.from('.sq', { scale: 0, delay: 2, stagger: {
      each: 0.2,
      from: 'random',
      grid: [squares, squares],
    },
    });
  });

But this animation is not working. I have also tried to find elements via gameRef that is put on squares parent element. I have tried to use gsap.from(‘div’, {…}) and add scope: gameRef to useGSAP hook. But it seems it just does not see child elements via selector, een if I pass className explicitly as string.
Also if I try to use gameRef.current.querySelectorAll('div') inside useGSAP hook I get empty array.
Looks like code is executed before children render.

Is there any way to animate children from parent element?