Scroll Spy Provider

Heading.tsx

const Heading = (props: Props) => {
  const ref = useRef<HTMLHeadingElement>();
  const ScrollSpy = useContext(ScrollSpyContext);
  if (
    ref.current &&
    ["H1", "H2", "H3"].indexOf(ref.current.tagName) >= 0
  ) {
    value?.observer!.observe(ref.current);
  }

  // ....
};

ScrollSpy.tsx

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

interface Props {
  children: React.ReactNode;
}

type ScrollSpyValue = {
  observer: IntersectionObserver | null;
  visible: Element[];
};

const ScrollSpyContext = createContext<ScrollSpyValue | null>(null);

const ScrollSpyProvider = ({ children }: Props) => {
  const [observer, setObserver] = useState<IntersectionObserver | null>(null);

  const [visible, setVisible] = useState<Element[]>([]);

  let value = {observer, visible};

  const handleIntersection = useCallback(
    (entries: IntersectionObserverEntry[], observer: IntersectionObserver) => {
      entries.forEach(e => {
        if (e.intersectionRatio > 0) {
          setVisible(prevVisible => [...prevVisible, e.target]);
        } else {
          setVisible(prevVisible => prevVisible.filter(v => v !== e.target));
        }
      })
    },
    [visible, setVisible]
  );

  useEffect(() => {
    const observer = new IntersectionObserver(handleIntersection, {
      threshold: 0,
    });

    setObserver(observer);

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

  return (
    <ScrollSpyContext.Provider value={value}>
      {children}
    </ScrollSpyContext.Provider>
  );
};

const ScrollSpyConsumer = ScrollSpyContext.Consumer;

export { ScrollSpyContext, ScrollSpyProvider, ScrollSpyConsumer };

TableOfContents.tsx

const TableOfContents = ({ doc }: TableOfContentsProps) => {
  const headings = getHeadings(doc);

  const ScrollSpy = useContext(ScrollSpyContext);
  
  return (
    <div>
      // Check ScrollSpy.visible against your child elements
      // and activate one if it matches.
      // For example, I'm looping through each of my known headings
      // and activating the first one that matches in value.visible
      // and keeping the last activated one in case none match
    }}
    </div>
)