Bootstrap V5 data-bs-toggle only shows collapse, doesnt hide it

As stated in title, due to some internal issue of data-bs-toggle in newer version of bootstrap, it only collapses and does not hide it afterwards, and after reading similar post about this issue https://github.com/twbs/bootstrap/issues/32643 where they addressed it, they didnt include any alternative in mean time, and as i am beginner in web development, i am unsure what would be the best approach to do the same feature?

 <nav class="navbar fixed-top navbar-expand-lg navbar-dark p-md-3">
    <div class="container">
      <a class="navbar-brand logoText" href="#">Power<span style="color:#0ac1ce;" class="logoText">In</span>Button</a>


      <!--Only collapses and does not hide (problem of V5 engine data-bs-toggle)-->
      <button class="navbar-toggler" 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">
        <div class="mx-auto"></div>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-white" href="/">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/blog">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-white" href="/cv">CV</a>
          </li>
          <li class="nav-item me-4">
            <a class="nav-link text-white" href="/contact">Contact</a>
          </li>

Any help would be greatly appreciated!