Bootstrap megamenu removing active class - menu

Question

Here is my html for the bootstrap 5.0 megamenu
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item" onclick="alert('hello services')"><a class="nav-link" href="#"> Services </a></li>
<li class="nav-item dropdown has-megamenu" onclick="alert('hello')">
<a class="nav-link dropdown-toggle active" href="#" data-bs-toggle="dropdown"> Mega menu </a>
<div class="dropdown-menu megamenu" role="menu">
<div class="row g-3">
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu One</h6>
<ul class="list-unstyled">
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
</ul>
</div>
</div>
<div class="col-lg-3 col-6">
<div class="col-megamenu">
<h6 class="title">Title Menu Two</h6>
<ul class="list-unstyled">
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
<li>Custom Menu</li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
js
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
/////// Prevent closing from click inside dropdown
document.querySelectorAll('.dropdown-menu').forEach(function(element){
element.addEventListener('click', function (e) {
e.stopPropagation();
});
})
});
// DOMContentLoaded end
</script>
Question: I need to manually remove the active class from megamenu element but the onclick event does not get triggered if li element has megamenu class (obviously because megameniu uses the click event to expand the menu). So how do I manually remove the active element from it without hacking the menu.
Background: I pass the menu item number in query string and add active class - that's my requirement. But then the user starts clicking on other items and the original item is no longer active so it needs to lose the class.
Any ideas?