Hola a todos, tengo un componente Autocompletar que estoy tratando de agregar un botón de diálogo a las opciones en las funciones renderOptions :

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

y Mi componente de diálogo es:

 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> ); }