nextJS navbar <Link> menu collapse toggle functionality

Question

I've been looking into <Nav.Link>Home</Nav.Link> as a solution to pass the ref to a mobile responsive react-bootstrap navbar so the navbar snaps back up or collapses and drops down upon clicking the link, but it doesn't work. I'm not sure what I'm doing wrong, or what I need to do for the when clicked snaps the dropdown menu back upwards. Trying to improve UX/UI, but for now a user would have to manually snapback the dropdown menu from the navbar. Any help or tips, or solution would be appreciated.

I'm in NextJS14 using react-bootstrap NavBar components.

so far the code looks like this below.

"use client"
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
import 'bootstrap/dist/css/bootstrap.min.css';
import { ConnectButton } from '@rainbow-me/rainbowkit';
import { useState } from 'react';
import Link from "next/link"
import { useRouter } from 'next/navigation'
import Dropdown from 'react-bootstrap/Dropdown';

() => router.push('/dashboard')

export default function NavBar() {
    const [isLoggedIn, setLogged] = useState(false)
  return (

    <>
{/* make chain status and connect button options togglable and changable */}
          <Navbar expand="lg" className="bg-body-tertiary">
      <Container>

      <Nav.Link
      className="text-black shadow-sm rounded-full bg-purple-500 p-4 mr-4 hover:bg-purple-700 hover:text-white">
      <Link href={isLoggedIn ? "/logout" : "/login"}>{ `${isLoggedIn ? "Logout" : "Login"}` }</Link>
      </Nav.Link>

        <Navbar.Brand href="#home">
            <ConnectButton
                label='Build Your Empire!'
                accountStatus={{
                smallScreen: 'avatar',
                largeScreen: 'full',
                                  }}
                chainStatus="name"
                showBalance={{
                smallScreen: true,
                largeScreen: false,
                                 }}
                />
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav" >
          <Nav className="me-auto">
            <Nav.Link > <Link href={"/"}>Home</Link> </Nav.Link>
            
               <NavDropdown title="Dashboard" id="basic-nav-dropdown">
              <NavDropdown.Item ><Link href="/dashboard">Persons name Dashboard</Link> </NavDropdown.Item>
              <NavDropdown.Item >
                {/* have it to where name of user pops up here
                example. Johns Product
                 */} <Link href={"/dashboard/products"}>Products</Link>
              </NavDropdown.Item>
              <NavDropdown.Item >
              <Link href={"/dashboard/services"}>Services</Link>
                </NavDropdown.Item>
                <NavDropdown.Item >
                <Link href={"/dashboard/income"}>Income</Link>
                </NavDropdown.Item>
                <NavDropdown.Item >
                <Link href={"/dashboard/ems"}>Employee Management System</Link>
                </NavDropdown.Item>
                <NavDropdown.Item >
                <Link href={"/dashboard/bot"}>bots</Link>
                </NavDropdown.Item>
            </NavDropdown>
        
          

            <NavDropdown title="Employ Portal" id="basic-nav-dropdown">
              <NavDropdown.Item ><Link href={"/ePortal/hirees"}>Employees</Link> </NavDropdown.Item>
              <NavDropdown.Item >
              <Link href={"/ePortal/hiring"}>Employment</Link>
              </NavDropdown.Item>
              <NavDropdown.Item >
              <Link href={"/ePortal/listings"}>Hiring</Link>
              </NavDropdown.Item>
              <NavDropdown.Item >
              <Link href={"/ePortal"}>Dashboard</Link>
              </NavDropdown.Item>
              <NavDropdown.Item >
              <Link href={"/ePortal/listings"}>Job Listings</Link>
              </NavDropdown.Item>
            </NavDropdown>
               <Nav.Link > <Link href="/tokenomics"> Tokenomics</Link> </Nav.Link>
               <Nav.Link ><Link href="/defi"> Defi</Link> </Nav.Link>
               <Nav.Link > <Link href="/cms"> CMS </Link> </Nav.Link>
               <Nav.Link > <Link href="/about"> About </Link> </Nav.Link>
               <Nav.Link > <Link href="/roadmap"> Roadmap </Link> </Nav.Link>
          </Nav>
                   </Navbar.Collapse>
               </Container>
             </Navbar>
           </>
  );
}

I tried wrapping the Navigation Link component with the Link component as a solution to pass the ref to a mobile responsive react-bootstrap navbar so the navbar snaps back up or collapses and drops down upon clicking the link, but it doesn't work. The result was when clicked, nothing happened and the menu didn't navigate at all.