GSAP ScrambleTextPlugin in React with Hooks

ScrambleText.jsx

import React, { useRef, useEffect } from "react";
import TweenLite from "gsap";
import "../../libs/gsap/ScrambleTextPlugin";

export default ({ children }) => {
  if (typeof window === "undefined") return children;

  const text = useRef(null);

  useEffect(() => {
    TweenLite.to(text.current, 1.2, {
      scrambleText: {
        text: children,
        chars: children,
        revealDelay: 1,
        speed: 0.5
      }
    });
  });

  return <span ref={text}>{children}</span>;
};