Реализуйте таблицу компонентов для блога gatsby с помощью наблюдателя пересечений

Question

Я реализовал компонент оглавления для своих сообщений в блоге, написанных на mdx. Теперь я хочу выделить ссылку в To C, соответствующую разделу блога, который читает пользователь. Вот мой подход:

Используйте 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);
        });
    });

Как видите, я пытался наблюдать за заголовками разделов, но это бесполезно, потому что, как только заголовок покидает границы пересечения, я не могу определить в каком я разделе.