[React] How to collapse the navbar Links after clicking on a link?

I am trying to collapse the navbar on mobile after clicking on a link but can't figgure out how to. I have used the preline collapse plugin methods HSCollapse.hide() but this also didn't work for me.

Hi, here is an example:

<button id="collapse" type="button" class="hs-collapse-toggle py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800" id="hs-basic-collapse" data-hs-collapse="#hs-basic-collapse-heading">
    Collapse
    <svg class="hs-collapse-open:rotate-180 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
</button>
<div id="hs-basic-collapse-heading" class="hs-collapse hidden w-full overflow-hidden transition-[height] duration-300" aria-labelledby="hs-basic-collapse">
    <div class="mt-5 bg-white rounded-lg py-3 px-4 dark:bg-neutral-800">
        <p class="text-gray-500 dark:text-neutral-400">
        This is a collapse body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions.
        </p>
    </div>
</div>

<button id="hide-btn">Hide</button>

      .....

<script>
    window.addEventListener('load', () => {
        const hideBtn = document.querySelector('#hide-btn');

        hideBtn.addEventListener('click', () => {
            HSCollapse.hide('#collapse');
        });
    });
</script>

htmlstreamofficial / preline

[React] How to collapse the navbar Links after clicking on a link? #361