React custom hook to observe an element is visible in viewport or not

onView.js

import { useEffect, useState, useRef } from "react";

export const useIntersection = (element: { current: any }, rootMargin: any) => {
  const [isVisible, setState] = useState(false);

  useEffect(() => {
    const current = element?.current;
    const observer = new IntersectionObserver(
      ([entry]) => {
        setState(entry.isIntersecting);
      },
      { rootMargin }
    );
    current && observer?.observe(current);

    return () => current && observer.unobserve(current);
  }, []);

  return isVisible;
};

export const onViewElement = ({ callbackFn, children }: { callbackFn: any; children: any }) => {
  const triggerRef = useRef(null);
  const isVisible = useIntersection(triggerRef, "0px");

  useEffect(() => {
    if (isVisible) {
      callbackFn();
    }
  }, [callbackFn, isVisible]);

  return (<div ref={triggerRef}>{children}</div>);
};