reactjs – How can I create buttons like select option in react.js?

I use this API:
mui.com/components/menus/#customization
I want to create something like the select option with the button, and if a value is selected, the same value will be set as the value of the button.

These are my codes:

import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state';
import {Box, Button, Divider, Typography} from '@mui/material';

import {DataProps} from './data';


  const [value, setValue] = React.useState(props.name)
  const handelChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <PopupState variant="popover" popupId="demo-popup-menu">
      {(popupState) => (
        <React.Fragment>
          <Button sx={{m: 0.5}} endIcon={<KeyboardArrowDownIcon />} variant="contained" {...bindTrigger(popupState)}>
            {value}
          </Button>
          <Menu {...bindMenu(popupState)}>
            {props.childs.map((item, index) =>
              <MenuItem key={index} onChange={handelChange} onClick={popupState.close}>{item.city}</MenuItem>
            )}
          </Menu>
        </React.Fragment>
      )}
    </PopupState>
  );
}

And these:

export const DataProps = [{
    text: {
        name: "name 1",
        childs: [{
                city: ['city 1']
            },
            {
                city: ['city 2']
            },
            {
                city: ['city 3']
            }
        ]
    }
},
{
    text: {
        name: "name 2",
        childs: [{
                city: ['city 1']
            },
            {
                city: ['city 2']
            },
            {
                city: ['city 3']
            }
        ]
    }
},
]

DataProps.map((item, index)=>
 <MenuPopupState key={index} name={item.text.name} childs={item.text.childs}/>
)

Above I called MenuPopupState in my component and gave it props.

Thanks if anyone can guide me.

Tags