Unable to show Sidebar when add 2nd Route with index element - css

Question

I am developing a dropdown Sidebar with ReactJS, and using separate files with the name of sizeConfig and colorConfigs and access it in mainLayout page using material UI.
sizeConfigs.js:
const sizeConfigs = {
sidebar:{
width:"300px"
}
}
export default sizeConfigs
colorConfigs.js:
import { colors } from "#mui/material";
const colorConfigs = {
sidebar: {
bg: "#233044",
color: "#eeeeee",
hoverBg: "#1e293a",
activeBg: "#1e253a"
},
topbar: {
bg: "#fff",
color: "#000"
},
mainBg: colors.grey["100"]
};
export default colorConfigs;
MainLayout.jsx:
import { Box, Toolbar } from '#mui/material'
import React from 'react'
import Topbar from '../common/Topbar'
import sizeConfigs from '../../configs/sizeConfigs'
import colorConfigs from '../../configs/colorConfigs'
import Sidebar from '../common/Sidebar'
import { Outlet } from 'react-router-dom'
const MainLayout = () => {
return (
<Box sx={{display:"flex"}}>
<Topbar />
{/*2nd Box*/}
<Box componenet="nav" sx={{
width:sizeConfigs.sidebar.width,
flexShrink:0
}}>
<Sidebar />
</Box>
{/*3rd Box*/}
<Box component="main" sx={{
flexGrow:1,
p:3,
width:`calc(100%-${sizeConfigs.sidebar.width})`,
minHeight: "100vh",
backgroundColor:colorConfigs.mainBg
}}>
<Toolbar />
<Outlet />
</Box>
</Box>
);
};
export default MainLayout
App.jsx File:
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import MainLayout from './components/layout/MainLayout';
//import HomePage from './pages/home/HomePage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<MainLayout/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
This code is showing my sidebar with main page, but when I add 2nd Route with index element, only homepage is showing on my main screen sidebar is not showing.
Code after adding 2nd Route:
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import MainLayout from './components/layout/MainLayout';
import HomePage from './pages/home/HomePage';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<MainLayout/>}/>
<Route index element={<HomePage/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
Please help me finding the mistake why my code is not displaying the sidebar and home page with display:flex as shown in the image: