bootstrap 5 multilevel nav manu not working, on first submenu item click next level/2nd level sub menu not opening,

Question

bootstrap 5 multilevel nav manu not working, on first submenu item click next level/2nd level sub menu not opening, istead first menu gets closed. 1 nav item li html is pasted below

<header class="navbar navbar-expand-lg bg-light shadow-sm">
    <div class="container-fluid px-lg-5">
        <a href="/" class="navbar-brand">
            <img src="{{ asset('assets/images/logo.png') }}" width="100" alt="logo">
        </a>
        <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarCollapse4"
                aria-expanded="false">
            <span class="navbar-toggler-icon"></span>
        </button>

        <nav id="navbarCollapse4" class="collapse navbar-collapse order-lg-2">
            <hr class="d-lg-none mt-3 mb-2">
            <ul class="navbar-nav mx-auto">
    <li class="nav-item">
        <a href="/" class="nav-link">Home</a>
    </li>
    <li class="nav-item">
        <a href="{{ route('pages', 'founder-message') }}" class="nav-link">Founders Message</a>
    </li>    
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button"
           data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Services
        </a>
        <ul class="dropdown-menu" aria-labelledby="servicesDropdown">
            <li class="nav-item dropdown">
                <a class="dropdown-item dropdown-toggle" href="#" id="webDevelopmentDropdown"
                   role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Web Development
                </a>
                <ul class="dropdown-menu" aria-labelledby="webDevelopmentDropdown">
                    <li><a class="dropdown-item" href="#">Sub-service 1</a></li>
                    <li><a class="dropdown-item" href="#">Sub-service 2</a></li>
                </ul>
            </li>
            <li><a class="dropdown-item" href="#">Graphic Design</a></li>
        </ul>
    </li>
    </ul>
</nav>
</div>
</header>