How to use the react-use.useIntersection function in react-use

function useAnimate(ref, animated, setAnimated) {
    const threshold = .45;
    const onScreen = useIntersection(ref, {
        root: null,
        rootMargin: '0px',
        threshold: threshold
    });

    const animate = (wrapper, title, video, image) => {

        if (animated === 'initial') {
            let tl = new TimelineLite();
            tl.fromTo(wrapper, 1.67,
                {opacity: 0, y: 800, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}
            ).fromTo(title, .87,
                {opacity: 0, y: 100, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}, .4
            ).fromTo(video, 1.7,

function useAnimate(ref, animated, setAnimated) {
    const threshold = .45;
    const onScreen = useIntersection(ref, {
        root: null,
        rootMargin: '0px',
        threshold: threshold
    });

    const animate = (wrapper, title, video, image) => {

        if (animated ==='initial') {
            let tl = new TimelineLite();
            tl.fromTo(wrapper, 1.67,
                {opacity: 0, y: 800, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}
            ).fromTo(title, .87,
                {opacity: 0, y: 100, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}, .4
            ).fromTo(video, 1.7,

export function useFadeInOnScroll(ref) {
    const threshold = .45;
    const onScreen = useIntersection(ref, {
        root: null,
        rootMargin: '0px',
        threshold: threshold
    });

    const fadeIn = (el) => {
        gsap.to(el, .67, {opacity: 1, y: -30, stagger: {amount: .6}, ease: 'power4.out'})
    };

    if (ref.current && onScreen && onScreen.intersectionRatio >= threshold) {
        fadeIn(ref.current.querySelectorAll('.fadeIn'));
    }
}

export default function Iframe({
  intersectionRootRef,
  style,
  src,
  ...restProps
}: IframeProps) {
  const [loaded, setLoaded] = useState(false);
  const [renderedSrc, setRenderedSrc] = useState(null);
  const iframeRef = useRef(null);
  const intersection = useIntersection(iframeRef, {
    root: intersectionRootRef.current,
    rootMargin: '800px',
    threshold: 0
  });

  const intersectionRatio = intersection?.intersectionRatio ?? null;

  useEffect(() => {
    if (intersectionRatio === null) {
      return;
    }

    if (intersectionRatio > 0 && src !== renderedSrc) {
      setRenderedSrc(src);
    }
  }, [intersectionRatio, src, renderedSrc]);

function useAnimate(ref, animated, setAnimated) {
    const threshold = .45;
    const onScreen = useIntersection(ref, {
        root: null,
        rootMargin: '0px',
        threshold: threshold
    });

    const animate = (wrapper, title, video, image) => {

        if (animated === 'initial') {
            let tl = new TimelineLite();
            tl.fromTo(wrapper, 1.67,
                {opacity: 0, y: 800, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}
            ).fromTo(title, .87,
                {opacity: 0, y: 100, ease: 'power4.out'},
                {opacity: 1, y: 0, ease: 'power4.out'}, .4
            ).fromTo(video, 1.7,