Nested Routing not working in react-router version 6

Question

React-Router Version 6

I tried this using react docs but this nested routing inside 'homepage' route is not working. What are mistakes or what's suggestion to run this nested routing.

It shows pages for '/' and '/homepage', But under nested routes of 'HomePage' component '/homepage/table' and '/homepage/forms' is not working or not rendering. It displays only blank page with homepage component

App.js

import './App.css';
import LoginHome from './components/login/LoginHome.js';
import Table from "./components/homepage/HomeTabs/Table.js";
import Forms from "./components/homepage/HomeTabs/Forms.js";
import FloatingSetting from './components/homepage/FloatingSetting';
import HomePage from "./components/homepage/HomePage.js"
import {Route, Routes} from "react-router-dom";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route index element={<LoginHome />} />
        <Route path="homepage" element={<HomePage />}>
          <Route index={true} element={<Table />} />
          <Route path="table" element={<Table />} />
          <Route path="forms" element={<Forms />} />
        </Route>
      </Routes>
      <FloatingSetting />
    </div>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

HomePage.js

there is just drawer at homepage..

    <Box sx={{ display: "flex" }}>
      <CssBaseline />
      <Drawer variant="permanent" open={open}>
        <DrawerHeader>
          <IconButton onClick={handleDrawerClose}>
            {theme.direction === "rtl" ? (
              <ChevronRightIcon />
            ) : (
              <ChevronLeftIcon />
            )}
          </IconButton>
        </DrawerHeader>
        <Divider />
        <List> 
          {["Table", "Forms", "Send email", "Drafts"].map((text, index) => (
            <Link to={text.toLowerCase()}>  // Link used here
            <ListItem key={text} disablePadding sx={{ display: "block" }}>
              <ListItemButton
                sx={{
                  minHeight: 48,
                  justifyContent: open ? "initial" : "center",
                  px: 2.5,
                  color: "9c1fb1",
                }}
              >
                <ListItemIcon
                  sx={{
                    minWidth: 0,
                    mr: open ? 3 : "auto",
                    justifyContent: "center",
                  }}
                >
                  {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
                </ListItemIcon>
                <ListItemText
                  primary={text}
                  sx={{ opacity: open ? 1 : 0, color: "9c1fb1" }}
                />
              </ListItemButton>
            </ListItem> 
          </Link>
          ))}
        </List>   
      </Drawer>
    </Box>
  );
}```