Creating 2 UIs with different headers using router react but subpages cannot open

I'm trying to create two UIs(managementUI and documentUI) with different headers and subpages. the header contains navigation buttons to open and display different subpage components between the header and footer of the UI it belongs to.

e.g. the ApiCardGrid component will be displayed in managementUI.

However, the subpage cannot open in the outlet between header and footer when I clicked button in navigation header.

In App.tsx:

function App() {
  const [totalApiData, setTotalApiData] = useState([]);

  useEffect(() => {
    axios.get("/api-documents").then((res) => {
      setTotalApiData(res.data);
    });
  }, []);

  return (
    <>
      <div className="App">
        <Router>
          <Routes>
            <Route
              path="/apiManagement"
              element={<ManagementUI />}
            >
              <Route
                path="apis"
                element={<ApiCardGrid spacing={2} size={3} />}
              />
            </Route>
            <Route
              path="/documents"
              element={<DocumentUI />}
            ></Route>
          </Routes>
        </Router>
      </div>
    </>
  );
}

In ManagementUI, I put an Outlet between header and footer to render the contents of subpages like ApiCardGrid:

function ManagementUI() {
  const [totalApiData, setTotalApiData] = useState([]);

  useEffect(() => {
    axios.get("/api-documents").then((res) => {
      setTotalApiData(res.data);
    });
  }, []);

  return (
    <>
      <div className="management-ui">
        <div className="management-header">
          <Header />
        </div>
        <div className="management-content">
          <Outlet />
        </div>
        <div className="management-footer">
          <Footer />
        </div>
      </div>
    </>
  );
}

In Header: ...

<nav>
            <Button href="apiManagement/apis">
              API List
            </Button> 
   
          </nav>

... When I input url http://localhost:3000/apiManagement, the UI shows up. However, when I clicked the API List button, the url jumps to http://localhost:3000/apiManagement/apis, but the subpage item not shows up. I opened inspect tool, but no errors.

the subpage supposed to display like