Unable to check the checboxes in loop in Material UI

I am using Material UI and React Hooks. I am running a loop in which I am printing the checkboxes. I am unable to check or uncheck them. They seem to be readonly. Nothing happens when I click on them. I console.logged to see and hooks are working fine and selectedExpertArr state is getting updated properly but checkboxes are not getting checked.

The code is like:

const [selectedExpertArr, setSelectedExpertArr] = useState([]);

The handler function is as follows:

const handleSelectedExperts = (e) => {
    console.log('selectedExpertArr')
    let clonedExpertArr = [...selectedExpertArr];
    if(e.target.checked === true) {
      clonedExpertArr.push(e.target.value)
      setSelectedExpertArr(clonedExpertArr);
    } else {
      let filtered = selectedExpertArr.filter((expert) => {
          return expert !== e.target.value;
      });

      clonedExpertArr = filtered;
      setSelectedExpertArr(clonedExpertArr);
    }

  }

The loop code is as follows:

         <DialogContent>
                <List>
                    {expertNames.map(expert => (
                    <ListItem button key={expert.id}>
                        <Checkbox
                            checked={(selectedExpertArr.indexOf(expert.id) > -1)? true : false }
                            name="expertCheckbox"
                            onChange={handleSelectedExperts}
                            value={expert.id}
                            color="primary"
                            inputProps=aria-label
                        />
                        <ListItemText primary={expert.username} />
                    </ListItem>
                    ))}
                </List>
        </DialogContent>