Hello everyone I have an Autocomplete component which I am trying to add a dialog button to the options in the renderOptions functions:

<Autocomplete
  id="combo-box-demo"
  options={someOptions}
  getOptionLabel={(option) => option.title}
  style={{ width: 300 }}
  renderOptions={(option) => <span>{option.name} <Dialog /><span />}
/>

and My dialog component is:

export default function DialogDemo() {
  const [open, setOpen] = React.useState(false);
  const [selectedValue, setSelectedValue] = React.useState(emails[1]);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = (value) => {
    setOpen(false);
    setSelectedValue(value);
  };

  return (
    <div>
      <Typography variant="subtitle1">Selected: {selectedValue}</Typography>
      <br />
      <Button variant="outlined" color="primary" 
        onMouseDown={(e) => {
            e.preventDefault();
            e.stopPropagation();
          }
        }
        onClick={handleClickOpen}>
        Open simple dialog
      </Button>
      
    </div>
  );
}