Navbar崩溃不适用于React-Bootstrap

Question

在响应模式下，折叠在导航栏中不起作用。我正在使用React-Bootstrap和Semantic-UI React（用于Icon）添加导航栏。

下面是我的代码：

<Navbar
      collapseOnSelect={true}
      expand="xl"
      className="navbarStyle"
      sticky="top"
    >
      <Navbar.Brand>
        <Image
          src={src}
          as="a"
          size="small"
          href="http://xxxx.com/"
          target="_blank"
        />
      </Navbar.Brand>
      <Navbar.Toggle aria-controls="responsive-navbar-nav" />
      <Navbar.Collapse id="responsive-navbar-nav">
        <Nav.Link
          as={RouterNavLink}
          to="/"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="1"
        >
          Home
        </Nav.Link>
        <Nav.Link
          as={RouterNavLink}
          to="/dashboard"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="2"
        >
          Dashboard
        </Nav.Link>
        <Nav.Link
          as={RouterNavLink}
          to="/profile"
          exact
          activeClassName="router-link-exact-active"
          style={navStyle}
          eventKey="3"
        >
          Profile
        </Nav.Link>
        <Nav className="ml-auto">
          <NavDropdown.Item style={dropStyle}>
            {isAuthenticated ? <LogoutButton /> : <LoginButton />}
          </NavDropdown.Item>
        </Nav>
      </Navbar.Collapse>
    </Navbar>

有人可以纠正我哪里出问题了吗？我应该为collapseOnSelect设置为自动折叠状态吗？

如图所示，仅当宽度大于1000px时，才使用上述代码折叠。 如果宽度为900px，则切换按钮处于无效状态，如上所示