How to return an empty pushState (or clear the current state) when fetching the index page

I am trying to turn a Tumblr site into a single page application.

Currently my page links work, I parse the href attribute, fetch the corresponding page, the update the pushState as well as an additional popstate eventListener so I can pass this to the history object.

The issue arises if I am on a specific sub page (about, contact etc) and then navigate to the index, the pushState is not replaced, even though for the index I am passing an empty string.

This seems like a pretty fundamental issue that I am assuming lots of JS libraries have resolved (React, Vue etc).

Here is my slightly truncated JS:

let internal = [...links].filter(item => item.getAttribute('href').startsWith('/'));

const updateContent = (input) => {
    pageWrapper.replaceChildren();
    const parser = new DOMParser();
    const doc = parser.parseFromString(input, 'text/html');
    const container = doc.querySelector('#container');
    pageWrapper.appendChild(container);
}

internal.forEach(item => {
    let href = item.getAttribute('href');
    let hrefSplit = href.split('/')[1];
    item.addEventListener('click', (event) => {
        event.preventDefault();
        event.stopPropagation();
        body.classList.add(loadingClass);
        if (href === '/') {
            hrefSplit = "";
        } 
        fetch(href)
            .then((res) => {
                return res.text();
            })
            .then((html) => {
                updateContent(html);
                history.pushState({ path: href }, "", hrefSplit); // does not work when the href is just '/'
                body.classList.remove(loadingClass);
            })
            .catch((err) => {
                console.warn('Something went wrong.', err);
                body.classList.remove(loadingClass);
            });
    });

    document.addEventListener('popstate', (event) => {
        const state = event.originalEvent.state;
        if (state) {
            updateContent(state.path);
        }
    });
});

My only thought it that perhaps an empty string won’t ever work, or if the fetch url is the index page, you have to manually remove the previous pushState, but not 100% sure.

I can add more code here if needed, but in addition all the code can be accessed at the Tumblr URL (it is slightly more verbose but the core functionality should be the same):
https://malarkey-test.tumblr.com/