when I click on a link, my webpage does not render the required component until I refresh the webpage.

Here’s my code:

  // index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* BrowserRouter is used to bind links or routes */}
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

  // App.js
  <Navbar bg="primary" variant='dark'>
      <div className='container-fluid'>
        <Navbar.Brand>TodosApp</Navbar.Brand>
        <Nav className='me-auto'>
          <Container>
            <Link className="nav-link" to={"/todos"}>Todos</Link>
            {user ? (
              <Link className="nav-link" onClick={logout} to={"/logout"}>Logout</Link>
            ) : (
              <>
                <Link className="nav-link" to={"/login"}>Login</Link>
                <Link className="nav-link" to={"/signup"}>Signup</Link>
              </>
            )}           
          </Container>
        </Nav>
      </div>
    </Navbar>

      <Switch>
        <Route exact path={["/", "/todos"]} render={(props)=>
          <TodosList {...props} token={token} />
        }>
        </Route>
        <Route path="/todos/create" render={(props)=>
          <AddTodo {...props} token={token} />
        }>
        </Route>
        <Route path="/todos/:id" render={(props)=>
          <AddTodo {...props} token={token} />
        }>
        </Route>
        <Route path="/login" render={(props)=>
          <Login {...props} login={login} />
        }>
        </Route>
        <Route path="/signup" render={(props)=>
          <Signup {...props} signup={signup} />
        }>
        </Route>
      </Switch>

I was expecting to navigate to other components in the navbar by rendering them when users click on the associated link. This happens alright. But the problem is I have to refresh the page before the newly rendered content is displayed. Otherwise the page content remains the same.