React Routes within Routes for Side Menu

I have 2 types of routes, one is like website/app level and one is SideMenu level, which is kind of nested routes. My problem is to change content by clicking on a menu-item of the SideMenu. Somehow I'm not able to get this work correctly. One important note, I use react-router-dom v6!

In my app I have the following:

function App(props) {
    return (
        <BrowserRouter>
            <Routes>
                <Route exact path="/" element={<MainApp {...props} />}></Route>
                <Route path="/signin" element={<SignIn />}></Route>
                <Route path="/register" element={<SignUp />}></Route>
                <Route path="*" element={<PageNotFound />}></Route>
            </Routes>
        </BrowserRouter>
    );
}

In the MainApp I have the following:

export default function MainApp(props) {
    const { classes } = props;

    return (
        <div className={classes.root}>
            <AppBar classes={classes} />
            <SideMenu classes={classes} />
            <main className={classes.appContent}>
                <Routes>
                    <Route path="dashboard" render={() => <Dashboard />} />
                    <Route path="checkout" render={() => <Checkout />} />
                    <Route path="users" render={() => <Users />} />
                </Routes>
            </main>
        </div>
    );
}

My SideMenu looks like this:

const SideMenu = ({ classes }) => {
    return (
        <Drawer
            variant="permanent"
            className={classes.drawer}
            classes={{ paper: classes.drawerPaper }}
        >
            <NavItems />
        </Drawer>
    );
};

Finally the ListItems, which are menu items of the SideMenu:

function NavItems(props) {
    return (
        <div>
            <List>
                {MenuItemsData.map((item) => {
                    return (
                        <ListItem
                            button
                            key={item.id}
                            to={item.url}
                            component={Navigate}
                        >
                            <ListItemIcon>{item.icon()}</ListItemIcon>
                            <ListItemText primary={item.title} />
                        </ListItem>
                    );
                })}
            </List>
        </div>
    );
}

I do got it working using props drilling by passing a handle click to a list item. But I like Routers more as it's cleaner and easier to understand.

So my question is, how do I get navigating content working using SideMenu with Router within a Router?

I found the solution thanks to this blog post: https://www.codingdeft.com/posts/react-router-tutorial/

In my app function, I replaced the root "/" to:

<Route path="main/*" element={<MainApp {...props} />}></Route>

In MainApp I modified the nested routes (which is allowed) to:

<Routes>
    <Route path="dashboard" element={<Dashboard />}></Route>
    <Route path="checkout" element={<Checkout />}></Route>
    <Route path="users" element={<Users />}></Route>
</Routes>

thnx to the comment of Drew Reese.

Finally in ListItems I have this:

<ListItem button key={item.id} to={item.url} component={NavLink}>
    <ListItemIcon>{item.icon()}</ListItemIcon>
    <ListItemText primary={item.title} />
</ListItem>

Where item.url could be "dashboard", "checkout" or "users".