Los cambios se realizan en todas las selecciones, en lugar de la que yo elija. Cuando marco la casilla de verificación en una selección, todas las demás cambian. Cambiando ¿Cómo puedo cambiar eso? las aplicaciones deben cambiar el nombre por el nombre de la casilla de verificación marcada en cada selección seleccionada. Sin embargo, cambia en todas las selecciones que tengo.

 const handleSelect = (e,id) => { let newValue = [1]; if (e.target.value.length) { newValue = e.target.value.filter((item) => { return item > 1; }); } const finalString = newValue .reduce((acumulatedFinal, pass) => { return acumulatedFinal + ", " + exportOptionNames[pass - 1]; }, "") .replace(",", "") .trim(); setSelectedSelections(finalString.length ? finalString : "Export Option"); setExportOption(newValue); }; <FormControl }> <Select onClick={(e)=> e.stopPropagation()} labelId="label" id="select" value={exportOption} multiple onChange={(e) => handleSelect (e, item.id)} key={item.id} renderValue={() => { return selectedOptionNames; }} input={<BootstrapInput />} > <MenuItem value={1} disabled> Export Report </MenuItem> <MenuItem value={2}> <Checkbox checked={exportOption.includes(2)} /> <ListItemText>{exportOptionNames[1]}</ListItemText> </MenuItem> <MenuItem value={3}> <Checkbox checked={exportOption.includes(3)} /> <ListItemText>{exportOptionNames[2]}</ListItemText> </MenuItem> <MenuItem value={4}> <Checkbox checked={exportOption.includes(4)} /> <ListItemText>{exportOptionNames[3]}</ListItemText> </MenuItem> </Select>