I am using the react bootsrtap NavBar with NextJs but the collapse on select is not working, The navbar is not collapsing when I press any link, it just navigates without collapsing.

import React from "react";
import { Nav, Navbar, Container } from "react-bootstrap";
import Link from "next/link";
import stylesNav from "./Navbar.module.css";

export default function Navigation() {
  return (
   <div>
      <Navbar
        collapseOnSelect
        fixed="top"
        className={stylesNav.topNavbar}
        expand="md"
        bg="dark"
        variant="dark"
      >
        <Container className={stylesNav.Cont}>
          <div className={stylesNav.scmpLogoNavbar}>
            <Link eventKey="0" href="/">
              <a className={` ${stylesNav.SCMP1}  ${stylesNav.Links}`}>SCMP</a>
            </Link>
          </div>

          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className={'me-auto'}></Nav>
            <Nav>

              <Link eventKey="1" href="/">
                <a className={stylesNav.navlink}>Home</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="2"
                href="/Departments"
              >
                <a className={stylesNav.navlink} >Departments</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="3"
                href="/Events"
              >
                <a className={stylesNav.navlink}>Events</a>
              </Link>

              <Link
                className={stylesNav.navlink}
                eventKey="3"
                href="/SWS"
              >
                <a className={stylesNav.navlink}>Startup-Weekend</a>

              </Link>

              <Link className={stylesNav.navlink} eventKey="4" href="/auth">
                <a className={stylesNav.navlink}>Login</a>
              </Link>

            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
);
}

I think the problem is from next/link. Using <Link> without a <a> inside it doesn't render any text inside it and Using <Nav.Link as={Link} href="/" to="/"></Nav.Link> also doesn't fix the problem.