I have a crud with firestore and react.In the app.js it has a navbar and two containers. The containers are shown but the navbar doesn't. This is the github repo: link to github project

  return (
    <>
    <Navbar bg="dark" variant="dark" className="header">
      <Container>
        <Navbar.Brand href="#home">Library - Firebase CRUD</Navbar.Brand>
      </Container>
    </Navbar>

    <Container style={{ width: "400px" }}>
      <Row>
        <Col>
          <AddBook id={bookId} setBookId={setBookId} />
        </Col>
      </Row>
    </Container>
    <Container>
      <Row>
        <Col>
          <BooksList getBookId={getBookIdHandler} />
        </Col>
      </Row>
    </Container>
    <Container style={{ width: "400px" }}>
      <Row>
        <Col>
          <UserAuthContextProvider>
            <Routes>
              <Route
                path="/home"
                element={
                  <ProtectedRoute>
                    <Home />
                  </ProtectedRoute>
                }
              />
              <Route path="/" element={<Login />} />
              <Route path="/signup" element={<Signup />} />
            </Routes>
          </UserAuthContextProvider>
        </Col>
      </Row>
    </Container>
  </>
    
  );