How to create a table of content using this library?

[colonder]

I'm trying to adapt the blog entry from OpenReplay but I have issues wrapping my head around the examples. This is how I modified useScrollSpy hook they wrote about:

import { useEffect, useState } from "react";
import { observe } from "react-intersection-observer";

export function useScrollSpy(
  ids: string[],
  options: IntersectionObserverInit
): string | undefined {
  const [activeId, setActiveId] = useState<string | undefined>();

  useEffect(() => {
    const elements = ids.map((id) => document.getElementById(id));
    elements.forEach((el) => {
      if (el) {
        const destroy = observe(
          el,
          (inView, entry) => setActiveId(entry.target.id),
          options
        );
        // destroy();
      }
    });
  }, [ids, options]);

  return activeId;
}

although I think there's a better way to do that. How can this be achieved? I found similar (I think) discussions here, here, here and here although I'm a rookie at React and I find it a bit confusing.