bootstrap 5 mega menu disappears really quick

I have this bootsrap 5 mega dropdown, I have an issue with it as it disappears quickly when I try to select the contents. I believe I have a css affecting this but just can’t figure it out. Reference https://mdbootstrap.com/docs/standard/extended/mega-menu/

HTML:

<header id="alaid-header" class="d-flex align-items-center bg-white shadow header">
  <div class="container d-flex justify-content-between">
  <div class="logo">
      <h1 class="text-light"><a href="index.php">
          <img src="./assets/img/logo.png" class="w-100" />
      </a></h1>
  </div>
    <nav id="navbar" class="navbar alaid-navbar">
      <ul>
        <li><a class="nav-link active" href="">Home</a></li>
        <li class="nav-item dropdown dropdown-hover position-static">
          <a class="nav-link" href="#" id="navbarDropdown" role="button"
            data-mdb-toggle="dropdown" aria-expanded="false">
            Impact<i class="bi bi-chevron-down"></i>
          </a>
          <!-- Dropdown menu -->
          <div class="dropdown-menu w-100 mt-0" aria-labelledby="navbarDropdown" style="border-top-left-radius: 0; border-top-right-radius: 0;">
            <div class="container mr-auto mx-0">
              <div class="row my-4">
                <div class="col-md-6 col-lg-3 mb-3 mb-lg-0">
                  <div class="list-group list-group-flush">
                    <h6><strong>Interest</strong></h6>
                    <hr />
                    <a href="">Cars</a>
                    <a href="">Houses</a>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 mb-3 mb-lg-0">
                  <div class="list-group list-group-flush">
                    <h6><strong>Lorem</strong></h6>
                    <hr />
                    <a href="">Lorem</a>
                    <a href="">Lorem</a>
                  </div>
                </div>
                <div class="col-md-6 col-lg-5 mb-3 mb-lg-0">
                  <div class="list-group list-group-flush">
                    <h6><strong>lorem</strong></h6>
                    <hr />
                    <a href="">lorem</a>
                    <a href="">lorem</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </nav>
  </div>
</header>

CSS:

.dropdown-menu {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px); 
  padding: 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: all 5s ease;
}

.dropdown-hover:hover>.dropdown-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:200;
}


.dropdown-hover>.dropdown-toggle:active {
  pointer-events: none;
}


.dropdown .dropdown-menu a {
  font-size: 13px !important;
  margin-left: -29px;
}
.nav-item {
  padding: 0.5rem 0xp;
}

.dropdown-menu .container{
  margin-bottom: -30px;
}

I have tried increasing the transition time and increase the z-index value but to no avail. I cant figure what css property I need to add to enable the hover effect stay up.