I am trying to create nested menu using Material UI, without any third party packages.

What I have Done:

• Created a menu and menu items.
• One of the menu item added a button.
• Opens another menu with menu item.

It is fine functionally, messy but functional.

Code:

    <Button 
            aria-controls="fade-menu" 
            aria-haspopup="true" 
            onClick={handleClick} >  
            EU <ArrowDropDown />
    </Button>
 <Menu
        id="fade-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
      >
{Object.keys(SETTING).map((key: string) => {
    <MenuItem
            key={key}
            onClick={onChange(key)}
            selected={isSelected}>
                 <Button // want this button to be hidden, but functional.
                    aria-controls="fade-menu"
                    aria-haspopup="true"
                    onClick={handleSubClick}
                  >
                   <ArrowDropDown />
                 </Button>
              <Menu
                    id="fade-menu"
                    aria-controls="fade-menu"
                    aria-haspopup="true"
                    anchorEl={subAnchorEl}
                    keepMounted
                    open={subOpen}
                    getContentAnchorEl={null}
                    anchorOrigin={{ vertical: "bottom", horizontal: 120 }}
                    transformOrigin={{ vertical: "top", horizontal: "center" }}
                    onClose={handleSubClose}
                    className={subMenu}
             >
     {Object.keys(euCountries).map((keyId: string) => (
                       <MenuItem
                          key={key}
                          onClick={onChange(keyId,true)}
                          selected={path[type] === keyId}>
                             UK 
                       </MenuItem>))}
                </Menu>
                  
    </MenuItem>
    )})}
</Menu>

The Problem:

I need this button with arrow down icon, integrated with the menu Item itself.

The output

Other than using third party packages, any work around is accepted. Like CSS changes or another child component etc.

Edit:

I want the output to look like this. Output I need

Instead I am gettting this. Output I get