react-bootstreap NavDropdown invalid hook call

Question

I have this Nav component I created using the react-bootstrap@2.7.2 package. The error that I am getting is this:

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;

I've went through the entire component and found that when I comment out the NavDropdown component from react-bootstrap, I do not get the error. I tried replacing with Dropdown from react-bootstrap and the same thing happens. Seems the error has to do with the dropdown specifically. I need the drop down and need to know why this is breaking. I"m also not getting any errors in the terminal and when I push to github and netlify deploys my site, I get zero errors. I'm lost

react-bootstreap NavDropdown invalid hook call

0 Answers0