I am trying to change/load router with bootstrap dropdown menu, please help me to do this

<Router>
  <nav>
    <Link to="/"> Home </Link>
    <Link to="login"> Login </Link>
    <Link to="products"> Products </Link>
  </nav>
  <Dropdown className="dropdown-groove">
    <Dropdown.Toggle variant="link" id="dropdown-basic">
      {selectedItem}
    </Dropdown.Toggle>
    <Dropdown.Menu>
      <Dropdown.Item
        href="#/action-1"
        onClick={() => setSelectedItem("Login")}
      >
        Login
      </Dropdown.Item>
      <Dropdown.Item
        href="#/action-1"
        onClick={() => setSelectedItem("Products")}
      >
        Products
      </Dropdown.Item> 
    </Dropdown.Menu>
  </Dropdown>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="login" element={<Login />} />
    <Route path="products" element={<Products />}/>      
  </Routes>
</Router>