Attempt to rewrite and execute renamed hash links - need advice

[hellocory]

I'm still some-what new to React, and NextJS, so I might be way out of my depth here... but I am trying to make it so the header hash links are the same name as the header.

Example:

a header normally has this hashlink: #239293823o98127dasdjh2dad but instead, I want it to be #header-name.

I have accomplished this, but now I am running into the issue where the functionality just stops.

I need it to work and behave like normal hashes, but it's not actually loading the the part that is in the URL when you reload, or when you click the item via Table of Contents. Not sure what my next step is. Here is what I currently have:

const LegalPageSlugClient = ({ data, recordMap }: Props) => {
  const [hydrated, setHydrated] = useState(false);
  console.log(recordMap);

  useEffect(() => {
    const hashLinks = document.querySelectorAll(".notion-hash-link");
    const headerContent = document.querySelectorAll(".notion-h-title");

    // Create a map to match the hash link elements to their respective headers
    const hashToHeaderMap = new Map();

    // Iterate through hashLinks to map them
    hashLinks.forEach((link) => {
      const href = link.getAttribute("href");

      if (href && typeof href === "string" && href.startsWith("#")) {
        const headingId = href.slice(1); // Remove the "#" character
        const headingText = link.nextElementSibling?.textContent || "";
        if (headingText) {
          hashToHeaderMap.set(headingId, headingText);
        }
      }
    });

    // Iterate through headerContent to create anchor elements
    headerContent.forEach((header) => {
      const headerId = header.getAttribute("id");
      if (headerId) {
        const headerAnchor = document.createElement("div");
        headerAnchor.classList.add("notion-header-anchor");
        headerAnchor.setAttribute("id", headerId);
        header.insertAdjacentElement("beforebegin", headerAnchor);
      }
    });

    // interate through "notion-table-of-contents-item" and update those hrefs as well.
    const tableOfContents = document.querySelectorAll(
      ".notion-table-of-contents-item",
    );

    tableOfContents.forEach((link) => {
      link.addEventListener("click", (event) => {
        event.preventDefault(); // Prevent default behavior
        const href = link.getAttribute("href");

        if (href && typeof href === "string" && href.startsWith("#")) {
          const headingId = href.slice(1); // Remove the "#" character
          const targetElement = document.querySelector(`#${headingId}`);
          if (targetElement) {
            targetElement.scrollIntoView({ behavior: "smooth" });
          }
        }
      });
    });

    // Update hash link href attributes
    hashLinks.forEach((link) => {
      const href = link.getAttribute("href");

      if (href && typeof href === "string" && href.startsWith("#")) {
        const headingId = href.slice(1); // Remove the "#" character
        const headingText = hashToHeaderMap.get(headingId);
        if (headingText) {
          link.setAttribute("href", `#${nicePathName(headingText)}`);
        }
      }
    });

    setHydrated(true);
    const hash = window.location.hash;
    console.log(hash);
    // if (hash && hydrated) {
    //   const targetElement = document.querySelector(hash);
    //   if (targetElement) {
    //     targetElement.scrollIntoView({ behavior: "smooth" });
    //   }
    // }
  }, [hydrated]);

Let me know what I can do! :)

PS: Ignore my noobish sudo-code :P I learn by steps.