Estoy usando la barra de navegación bootsrtap de reacción con NextJs, pero el colapso al seleccionar no funciona. La barra de navegación no se colapsa cuando presiono cualquier enlace, simplemente navega sin colapsar.

 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> ); }

Creo que el problema es de next/link. El uso de <Link> sin un <a> dentro no representa ningún texto dentro y el uso <Nav.Link as={Link} href="/" to="/"></Nav.Link> tampoco lo hace No solucione el problema.