Javascript foreach error with Wordpress Navwalker

Question

I'm getting an issue with when using a bootstrap Navwalker, I'm using the following JS script to be able to do a few different bits of functionality.

const navExpand = [].slice.call(document.querySelectorAll('.nav-expand'))
const backLink = `<li class="nav-item">
    <a class="nav-link nav-back-link" href="#">
        Back
    </a>
</li>`

navExpand.forEach(item => {
        console.log('11111');
    item.querySelector('.nav-expand-content').insertAdjacentHTML('afterbegin', backLink)
    item.querySelector('.nav-link').addEventListener('click', () => item.classList.add('active'))
    item.querySelector('.nav-back-link').addEventListener('click', () => item.classList.remove('active'))
})

However, I'm getting an error message of:

TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')

Which would make me think there isn't any ".nav-expand" elements. But my console log of "11111" returns 3 times, so its definitely seeing them?

I also tried the JS using static HTML and it worked as intended.

Any help? Thanks in advance