Estoy tratando de usar la selección múltiple de Material UI con casillas de verificación. Hasta ahora, puedo hacer selecciones múltiples y obtener los valores, pero no puedo representar los nombres reales de los valores seleccionados u obtener todos los valores seleccionados. Se agradecerá cualquier dirección a un nuevo enfoque que pueda usar o enlaces útiles para ayudar a obtener las identificaciones de todos los valores seleccionados en mi matriz.

Creé un sandbox que también tiene una simulación de mis datos de una API aquí: sandbox

Mi selección se ve así:

 const [selected, setSelected] = useState([]); const isAllSelected = options.length > 0 && selected.length === options.length; const handleChange = (event) => { console.log("vals", event.target); const value = event.target.value; if (value[value.length - 1] === "all") { setSelected(selected.length === options.length ? [] : options.title); return; } setSelected(value); console.log("values", selected); }; <FormControl className={classes.formControl}> <InputLabel id="mutiple-select-label">Multiple Select</InputLabel> <Select labelId="mutiple-select-label" multiple variant="outlined" value={selected} onChange={handleChange} renderValue={(selected) => selected} MenuProps={MenuProps} > <MenuItem value="all" classes={{ root: isAllSelected ? classes.selectedAll : "" }} > <ListItemIcon> <Checkbox classes={{ indeterminate: classes.indeterminateColor }} checked={isAllSelected} indeterminate={ selected.length > 0 && selected.length < options.length } /> </ListItemIcon> <ListItemText classes={{ primary: classes.selectAllText }} primary="Select All" /> </MenuItem> {options.map((option) => ( <MenuItem key={option.id} value={option.id}> <ListItemIcon> <Checkbox checked={selected.includes(option.id)} /> </ListItemIcon> <ListItemText primary={option.title} /> </MenuItem> ))} </Select> <p>{selected}</p> </FormControl>