Use this hook to check if element is in viewport or not.

useElementInView.js

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

export const useElementInView = (options) => {
  const elementRef = useRef(null);

  const [isInView, setIsInView] = useState(false);

  const handleObserve = (entries) => {
    const [entry] = entries;

    setIsInView(entry.isIntersecting);
  };

  useEffect(() => {
    const observer = new IntersectionObserver(handleObserve, options);
    if (elementRef.current) {
      observer.observe(elementRef.current);
    }

    return () => {
      if (elementRef.current) {
        observer.unobserve(elementRef.current);
      }
    };
  }, [elementRef, options]);

  return [elementRef, isInView];
};