how to display menu items dynamically in react js - reactjs

Question

Here is the menu UI
Trying to load menu and menu item dynamically from backend through redux state.not able render menu items for specific menu.
json Data structre:
menuContext:{
Define:[{id:1,label:"user"},{id:2,label:"test"}]
Manage:[{id:1,label:"test2"},{id:2,label:"test3"}]
}
function MenuContext() {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const handleClick = (event) => {
console.log(event.currentTarget)
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const { viewService, isError, message } = useSelector(state => state.auth)
const [menu, setMenu] = useState([])
const [items, setItems] = useState([])
const dispatch = useDispatch();
useEffect(() => {
return () => {
console.log("cleaned up");
dispatch(resetMenuContext())
setMenu([])
};
}, []);
useEffect(() => {
if (viewService !== undefined) {
if (viewService?.menuContext !== undefined) {
const { menuContext } = viewService && viewService
setMenu(menuContext)
}
}
}, [viewService])
return (
<>
{
Object.entries(menu).map(([key, value]) => (
<>
<Button
id={`button-${key}`}
aria-controls={open ? `menu-${key}` : undefined}
aria-haspopup="true"
aria-expanded={open ? 'true' : undefined}
variant="contained"
disableElevation
onClick={handleClick}
endIcon={<KeyboardArrowDownIcon />}
disableRipple
style={{ textTransform: 'none' }}
>
{i18next.t(`label.${key}`)}
</Button>
<StyledMenu
id={`menu-${key}`}
MenuListProps={{
'aria-labelledby': `button-${key}`,
}}
anchorEl={anchorEl}
open={open}
onClose={handleClose}
key={key}
>
{
Object.entries(value).map(({ id }) => (
<MenuItem>
{id}
</MenuItem>
))
}
</StyledMenu>
</>
))
}
</>
)
}
what changes i need to make, to display menu i items for each menu.

Answer 1

Value seems to be an array
{
value?.map({ id, label }) => (
<MenuItem key={id}>
{label}
</MenuItem>
))
}