thắc mắc thím nào làm react giúp em với

import React from "react";
import { Grid } from "@mui/material";
import { List } from "@mui/material";
import { ListItemButton, ListItemText } from "@mui/material";
import { Box } from "@mui/system";



const App = ()=> {
  const data = [
    { menu:'item1',
      sub_menu:[
        {code:'1',
         sub_items:'sub_items1.1'
        },
        {code:'1',
         sub_items:'sub_items1.1'
        }
      ]
    },
    { menu:'item2',
      sub_menu:[
        {code:'1',
         sub_items:'sub_item2.1'
        },
        {code:'1',
        sub_items:'sub_item2.2'
       }
      ]
    }
  ]

  return (
    <React.Fragment>
      <Box >
          <Grid container sx={{height:'100%'}}>
            <Grid item xs={6} >
                <List >
                  <ListItemButton onClick={}>
                    <ListItemText>
                    item1
                    </ListItemText>
                  </ListItemButton>
                </List>
           
            </Grid>
            <Grid item xs={6}>
              <Grid container direction="column" sx={{height: "100%"}}>
                <Grid item sx={{height: "100%"}}>
                  <List >
                    <ListItemButton >
                      <ListItemText>
                        sub_items1.1'
                      </ListItemText>
                    </ListItemButton>
                    <ListItemButton >
                      <ListItemText>
                        sub_items1.2'
                      </ListItemText>
                    </ListItemButton>
                  </List>
                </Grid>
              </Grid>
            </Grid>
          </Grid>
        </Box>
    </React.Fragment>
  );
}

export default App;

const Item = ({item}) => {
    const [hide, setHide] = useState(false)
    const handleClick = () => {
        setHide((hide) => !hide);
    }
    return (
         <LeftMenu click={handleClick} />
         <RightMenu hide={hide} />
    )
}

const App = () => {
    return data.map((item) => {
        <Item item={item}/>
   })
}

import React, { useState } from 'react';
import { Grid } from '@mui/material';
import { List } from '@mui/material';
import { ListItemButton, ListItemText } from '@mui/material';
import { Box } from '@mui/system';

const App = () => {
  const [activeMenu, setActiveMenu] = useState('');

  const Array1 = [
    { id: 1,
      menu: 'abc'
    },     
    { id: 2,
      menu: 'bcd'
    }
  ]

const Array2 =[
    {
      id: 1,
      submenu : [
                  {code: "100", submenu_name:'sub_abc'},
                  {code: "200", submenu_name:'sub_bcd'}
                ]
    },
    {
      id: 2,
      submenu : [
                  {code: "300", submenu_name:'sub_qwe'},
                  {code: "400", submenu_name:'sub_bcd'}
                ]
    }
  ]

  const handleClickMenu = (menuKey) => {
    if (menuKey) {
      setActiveMenu(menuKey);
    }
    console.log(menuKey)
  };

  return (
    <React.Fragment>
      <Box>
        <Grid container sx={{ height: '100%' }}>
          <Grid item xs={6}>
            <List>
              {Array1 &&
                Array1.map((menu) => {
                  return (
                    <ListItemButton
                      key={menu.menu}
                      onClick={() => {
                        handleClickMenu(menu.menu);
                      }}
                    >
                      <ListItemText>{menu.menu}</ListItemText>
                    </ListItemButton>
                  );
                })}
            </List>
          </Grid>

          <Grid item xs={6}>
            <Grid container direction="column" sx={{ height: '100%' }}>
              <Grid item sx={{ height: '100%' }}>
                <List>
                  {Array2 &&
                    Array2.map((menu) => {
                      if (menu && menu.submenu && menu.submenu_name === activeMenu) {
                        return menu.submenu.map((subMenu) => {
                          debugger;
                          return (
                            <ListItemButton key={subMenu.submenu_name}>
                              <ListItemText>
                                {subMenu.submenu_name}
                              </ListItemText>
                            </ListItemButton>
                          );
                        });
                      }
                      return null;
                    })}
                </List>
              </Grid>
            </Grid>
          </Grid>
        </Grid>
      </Box>
    </React.Fragment>
  );
};

export default App;