Menu with Routes MAP use in List in MUI REACT JS

 Menu with Routes MAP use in List in MUI REACT JS

const navItems = ['Home', 'About', 'Contact'];

const navRoutes = ['/' , '/login','/login'];

function DrawerAppBar(props) {

    const handleDrawerToggle = () => {

        setMobileOpen((prevState) => !prevState);

    };

    const drawer = (

        <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>

            <Typography variant="h6" sx={{ my: 2 }}>

                SUREVIH ROOM RENT

            </Typography>

         

            <List>

                    // Multiple map function decode

                    // Menu Items with Routes (Links)

                {navItems.map((item , index) => (

                    <ListItem key={item} disablePadding>

                        <ListItemButton  href={navRoutes[index]} sx={{ textAlign: 'center' }}>

                            <ListItemText primary={item} />

                        </ListItemButton>

                    </ListItem>

                ))}

            </List>

        </Box>

    );

    const container = window !== undefined ? () => window().document.body : undefined;

    return (