Incorrect routing by Dashboard Layout - Material UI?

I'm integrating the Material-UI DashboardLayout into my React project, but I'm running into a routing issue. When I define a segment like "/dashboard/review-files" in the navigation, it routes to the literal path "/dashboard/review-files" instead of resolving dynamically to something like http://localhost:3080/mentor/dashboard/review-files.

I've ensured that my React Router setup in App.js matches the paths defined in the navigation and there are no other errors in the application. I have gone through Material-UI documentation and other resources, but I still can't figure out why this is happening. My goal is for the navigation to properly route to full URLs, like http://localhost:3080/mentor/dashboard/review-files , when clicked. I’d appreciate any guidance on how to make this work. Thanks in advance!

Code Snippets:

//App.js (Simplified):

const NAVIGATION = [
  {
    kind: 'header',
    title: 'Main items',
  },
   {
    segment: '/dashboard/review-files',
    title: 'Review Files',
    icon: <RateReviewIcon />,
  },
]
return (
  <>
    <AppProvider
      navigation={NAVIGATION} 

    >
    <BrowserRouter>
    
        <Routes>

          <Route path="/mentor/dashboard" element={element={<Dashboard />} />
        </Routes>
    </BrowserRouter>
   </AppProvider>
  </>
);

//Dashboard.js:
function Dashboard() {
 
  return (
    

      <DashboardLayout>
      <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '90vh' }}>
          <DemoPageContent />
            <Outlet /> //For displaying the nested components
          <Footer />
        </Box>
      </DashboardLayout>
    


  );
}
export default Dashboard;

Output nav link when rendered:

mentor/dashboard/review-files

How it should be:

localhost:3080/mentor/dashboard/review-files

The issue seems to be with the segment you are passing. In the MUI documentation, segment paths are typically written without a leading forward slash (/).

Try using:

segment: 'dashboard/review-files'