Detect intersection between two components in ReactJS using IntersectionObserver

0

I am trying to implement an intersectionObserver to watch if a isIntersecting, but specifically only with another

My Attempt :-

export const Main = () => {
  const sectionRef = useRef(null);
  const { headerRef } = useContext(HeaderContext);
  const [isIntersecting, setIntersecting] = useState<Boolean>(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // Update state based on intersection status
        setIntersecting(entry.isIntersecting);
        console.log(entry)
      
      },
      {
        root: document.querySelector('.app-header'),
        rootMargin: '0px',
        threshold: 0.1, // Intersection ratio
      }
    );

    // Start observing the Section element
    if (sectionRef.current) {
      observer.observe(sectionRef.current);
    }

    // Cleanup function
    return () => {
      observer.disconnect();
    };
  }, []);

My desired result is to receive a true value if at point the user is scrolling and the header component intersects with the target Section Component. I have set the root in the options object to a be the reference of the actual header. When I try to scroll down, the Observer is observing based on the scroll viewport and not with the header. I’m definitely missing some key logic somewhere. Any help would be great.