react-bootstreap NavDropdown 无效挂钩调用

Question

我有使用 [email protected] 包创建的 Nav 组件。我得到的错误是：

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

function NavBar() {
  const [expanded, setExpanded] = useState(false);

  const scrollToTopAndCloseNavBar = async () => {
    await setExpanded(false);
    window.scrollTo(0, 0);
  };

  const programTitles = useSelector(
    (state) => state.contentfulReducer.programTitles
  );
  return (
    <Navbar
      className="nav-bar"
      collapseOnSelect={true}
      expand="lg"
      variant="dark"
      // sticky="top"
      expanded={expanded}
    >
      <Container>
        <Link
          style={{ textDecoration: "none" }}
          to="/"
          className="logo-container"
        >
          <img
            alt="ace_gymnastics_logo"
            src={logofull}
            width="720"
            height="720"
            className="logo"
          />
        </Link>
        <Navbar.Toggle
          onClick={() => setExpanded(expanded ? false : "expanded")}
          aria-controls="responsive-navbar-nav"
        />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link onClick={scrollToTopAndCloseNavBar} as={Link} to="/">
              Home
            </Nav.Link>
            <Nav.Link onClick={scrollToTopAndCloseNavBar} as={Link} to="/staff">
              Staff
            </Nav.Link>
            <NavDropdown title="Programs" id="collasible-nav-dropdown">
              {programTitles?.map((program, key) => {
                return (
                  <NavDropdown.Item
                    onClick={scrollToTopAndCloseNavBar}
                    key={key}
                    as={Link}
                    to={`/programs/program-details/${program.fields.displayName}`}
                  >
                    {program.fields.displayName}
                  </NavDropdown.Item>
                );
              })}
            </NavDropdown>
            <Nav.Link
              onClick={scrollToTopAndCloseNavBar}
              as={Link}
              to="/events"
            >
              Events
            </Nav.Link>
            <Nav.Link href={calendar} target="_blank">
              Calendar
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default NavBar;

我检查了整个组件，发现当我从 react-bootstrap 中注释掉 NavDropdown 组件时，我没有得到错误。我需要下拉菜单，需要知道为什么会这样。