Unable to access object elements with props and Route in SidebarItem Component - reactjs

Question

I am trying to access the object elements from appRoutes file via props. I made an appRoutes File from where I want to access all elements.
appRoutes File:
import HomePage from '../pages/home/HomePage';
import DashboardPageLayout from '../pages/dashboard/DashboardPageLayout'
import DashboardOutlinedIcon from '#mui/icons-material/DashboardOutlined';
import FormatListBulletedOutlinedIcon from '#mui/icons-material/FormatListBulletedOutlined';
import ChangeLog from "../pages/changlog/ChangeLog"
import DefaultPage from "../pages/dashboard/DefaultPage"
import SaasPage from "../pages/dashboard/SaasPage"
import AnalyticsPage from "../pages/dashboard/AnalyticsPage"
import DashboardIndex from '../pages/dashboard/DashboardIndex'
const appRoutes=[
{
index:true,
element:<HomePage/>,
state: "home"
},
{
path:"/dashboard",
element:<DashboardPageLayout/>,
state:"dashboard",
sidebarProps:{
displayText:"Dashboard",
icon: <DashboardOutlinedIcon />
},
child:[
{
index: true,
element:<DashboardIndex/>,
State:"dashboard.index",
},
{
path:"/dashboard/default",
element:<DefaultPage />,
state:"dashboard.default",
sidebarProps:{
displayText:"Default"
},
},
{
path: "/dashboard/analytics",
element:<AnalyticsPage/>,
state: "dashboard.analytics",
sidebarProps:{
displayText:"AnalyticsPage"
},
},
{
path:"/dashboard/saas",
element:<SaasPage/>,
state:"dashboard.saas",
sidebarProps:{
displayText:"SaasPage"
},
},
]
},
{
path: "/changelog",
element:<ChangeLog/>,
state:"changelog",
sidebarProps:{
displayText:"ChangeLog",
icon: <FormatListBulletedOutlinedIcon />
},
}
];
export default appRoutes;
I am trying to map all elements in my Sidebar file with route variable and passed in SidebarItem component with prop item.
sidebar.jsx:
import { Avatar, Drawer, List, Toolbar } from "#mui/material";
import { Stack } from "#mui/system";
import assets from "../../assets";
import colorConfigs from "../../configs/colorConfigs";
import appRoutes from "../../routes/appRoutes"
import sizeConfigs from "../../configs/sizeConfigs";
import SidebarItem from "./SidebarItem";
const Sidebar = () => {
return (<Drawer variant="permanent" sx={{
width: sizeConfigs.sidebar.width,
flexShrink: 0,
"& .MuiDrawer-paper": {
width: sizeConfigs.sidebar.width,
boxSizing: "border-box",
borderRight: "0px",
backgroundColor: colorConfigs.sidebar.bg,
color: colorConfigs.sidebar.color
}
}}>
<List disablePadding>
<Toolbar sx={{ marginBottom: "20px" }}>
<Stack sx={{
width: "100%"
}} direction="row" justifyContent="center">
<Avatar src={assets.images.logo}/>
</Stack>
</Toolbar>
{appRoutes.map((route,index)=>(
route.sidebarProps ?(
<SidebarItem item = {route} key={index} />
) : null
)
)}
</List>
</Drawer>);
};
export default Sidebar;
in SidebarItem component I have defined item prop which is passed in sidebarItem.jsx.
SidebarItem.jsx:
import React from 'react'
import { ListItemButton,ListItemIcon } from '#mui/material'
import colorConfigs from '../../configs/colorConfigs'
const SidebarItem = ({item}) => {
return (
item.sidebarPropps && item.path ?
(
<ListItemButton>
<ListItemIcon sx={{color:colorConfigs.sidebar.color}}>
{item.sidebarProps.icon && item.sidebarProps.icon}
</ListItemIcon>
{item.sidebarProps.displayText}
</ListItemButton>
):null
)
}
export default SidebarItem
But this item prop is unable to access route elements from Sidebar.jsx file and does not displaying element from appRoutes.jsx file.
Please help to identify why my elements are not accessible from item props?