on demand menu items

src/Components/Navigation/listItems.js

 import * as React from 'react';
 import { Nav } from 'react-bootstrap';
 
-import { 
-    Fingerprint, History, MiscellaneousServices , 
-    ExpandLess, ExpandMore
-} from '@mui/icons-material/'
+import { Fingerprint, ExpandLess, ExpandMore } from '@mui/icons-material/'
 
 import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
 import { Collapse,ListItem, List ,ListItemIcon,ListItemText,ListSubheader } from '@mui/material/'
 
 import { 
-    MainItems, ExtraItems, PruebaItems
+    MainItems, ExtraItems, PruebaItems, TxTStyle
 } from '../../Utils/MenuItems'
 
+
 function NavItem (props) {
     
     let navigate = useNavigate()
                 {icon && icon}
             </ListItemIcon>
             <ListItemText 
-                sx={{
-                    fontSize: 12,
-                    ' .css-10hburv-MuiTypography-root' : {
-                        fontSize : '.875rem'
-                    },
-                }}
+                sx={TxTStyle}
                 primary={title} 
             />
         </ListItem>
 
     return(
         <List>
-
             <ListSubheader inset>MENÚ</ListSubheader>
-
-
             {
                 MainItems.map( ({ icon, title, route}) =>  (
                     <NavItem icon={icon} title={title} route={route} />
                 ))
             }
-
             <ListItem selected={open} onClick={showPruebas}>
                 <ListItemIcon>
                     <Fingerprint />
                 </ListItemIcon>
-
-
                 <ListItemText 
-                    sx={{
-                        fontSize: 12,
-                        ' .css-10hburv-MuiTypography-root' : {
-                            fontSize : '.875rem'
-                        },
-                    }}
+                    sx={TxTStyle}
                     primary="Pruebas" 
                 />
                 {open ? <ExpandLess /> : <ExpandMore />}
             </ListItem>
-
-
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
                     {
                 </List>
             </Collapse>
 
-            <NavItem icon={<MiscellaneousServices/>} title="Configuraciones" route="configuraciones" />
-            <NavItem icon={<History/>} title="Historial" route="historial" />
         </List>
     )
 };

src/Utils/MenuItems.js

 import React from 'react';
 import {
     Home,Work, VisibilityOff, PeopleAlt,
-    Equalizer, OndemandVideo, SupportAgent, Star
+    Equalizer, OndemandVideo, SupportAgent, Star,
+    MiscellaneousServices, History
 } from '@mui/icons-material'
 
 
         route : 'resultados',
         title : 'Resultados'
     },
+    {
+        icon : <MiscellaneousServices/>,
+        route : 'configuraciones',
+        title : 'Configuraciones'
+    },
+    {
+        icon : <History/>,
+        route : 'historial',
+        title : 'Historial'
+    },
 ]
 
 export const ExtraItems = [
         title:"Calificaciones",
     },
 ]
+
+export const TxTStyle = {
+    fontSize: 12,
+    ' .css-10hburv-MuiTypography-root' : {
+        fontSize : '.875rem'
+    },
+}
+