Javascript 使用intersection observer为gatsby博客实现组件表

我已经为我用mdx写的博客文章实现了一个目录组件。现在我想突出显示ToC中与用户正在阅读的博客部分相对应的链接。我的做法如下：

使用Intersection Observer观察与我的文章标题相对应的部分，并在目录中设置相应链接的样式

现在我面临的问题是。我不知道如何针对生成的html中的标题对应的整个部分（例如，图像中两个H3之间的所有段落）。 请帮帮我。

如您所见，我试图观察区段标题，但这没有用，因为一旦标题离开交叉点边界，我就无法确定我在哪个区段

    const navLinkToHighlight = useRef(null);
    useEffect(() => {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            const selector = `nav a[href="${fields.slug}#${id}"]`
            const className = 'Toc--link-active'

            if (entry.intersectionRatio > 0) {
                if (navLinkToHighlight.current) {
                    navLinkToHighlight.current.classList.remove(className);
                    navLinkToHighlight.current = document.querySelector(selector);
                    navLinkToHighlight.current.classList.add(className);
                } else {
                    navLinkToHighlight.current = document.querySelector(selector);
                    navLinkToHighlight.current.classList.add(className);
                }
            }
            });
    });

        document.querySelectorAll('article a[id]').forEach(headingLink => {
            observer.observe(headingLink);
        });
    });