Reactjs Reactrouterdom的链接不改变路由(ReactRouter6)

一个带有侧边栏的简单SPA.

目前，我应该只有两个页面/路由:1)"/"中的仪表板，2)"/Team"中的团队. 试试这里的应用Vercel链接:https://react-admin-dashboard-eight-pi.vercel.app/team

由于某些原因，从ReactRouter6使用链路时，路由不起作用.点击侧边栏菜单不会触发任何路由更改. 我到底做错了什么？

完整代码在此:https://github.com/windyzhang777/react-admin-dashboard/blob/main/src/App.jsx

//App.jsx

import { Route, Routes } from "react-router-dom";

<div className="app">
  <Sidebar /> {/* -------------------------------- has all the Links */}
  <main className="content">
    <Routes>
      <Route path="/" element={<Dashboard />} /> {/* ---- home route */}
      <Route path="/team" element={<Team />} /> {/* ----- team route */}
    </Routes>
  </main>
</div>

//Sigro.jsx

import { Menu, MenuItem, Sidebar as ProSidebar } from "react-pro-sidebar";
import { Link } from "react-router-dom";

export default function Sidebar() {
  const [isCollapsed, setIsCollapsed] = useState(false);
  const [selected, setSelected] = useState("Dashboard");

  return (
    <Box>
      <ProSidebar collapsed={isCollapsed}>
        <Menu>
          {/* MENU ITEMS */}
          <Box>
            <MenuItem
              active={selected === "Dashboard"}
              onClick={() => setSelected("Dashboard")}
            >
              <Typography>{"Dashboard"}</Typography>
              <Link to={"/"} /> {/* ---------------------- home route */}
            </MenuItem>

            <MenuItem
              active={selected === "Manage Team"}
              onClick={() => setSelected("Manage Team")}
            >
              <Typography>{"Manage Team"}</Typography>
              <Link to={"/team"} /> {/* ------------------ team route */}
            </MenuItem>
          </Box>
        </Menu>
      </ProSidebar>
    </Box>
  );
}