Bootstrap 5 hamburger menu won't remove show class - html

Question

So I can open the menu just fine with the nav button, but when it opens I cannot close it with the button. I added some JS to allow the user to close the menu whenever clicking outside of the menu or on the links and that works...but for some reason, you still can't close the menu when clicking the button itself. I also noticed the button seems to work on my native desktop, but the website I'm developing is on Shopify's platform...so not sure if Shopify is getting in the way or what.
Here is how the nav looks in index.html:
<header>
<nav class="navbar fixed-top navbar-light navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand w-25 m-0" href="#">
<img class="img-fluid" src="{{ 'image.png' | file_img_url: 'master' }}" alt="logo" />
</a>
<button class="navbar-toggler me-5" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="d-flex nav navbar-nav">
<li class="nav-item mx-auto">
<a class="nav-link text-uppercase fw-bold" href="#results">Results</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link text-uppercase fw-bold" href="#testimonies">Testimonials</a>
</li>
<li class="nav-item mx-auto">
<a class="nav-link text-uppercase fw-bold" href="#howItWorks">How it works</a>
</li>
<!-- Currently hidding section on mobile (TEMPORARY ONLY) -->
<li class="nav-item mx-auto d-none d-lg-block">
<a class="nav-link text-uppercase fw-bold" href="#team">Our Team</a>
</li>
<a class="btn mx-auto contact-btn text-uppercase px-4" role="button" href="#Contact">contact us</a>
</ul>
</div>
</div>
</nav>
</header>