Checkbox doesn't respond to onChange when checked is driven by state

I have a material-ui Table and have been implementing multi-select functionality on it.

My multi select should behave as follows :

• Select checkboxes only appear at the start of a row on hover (when nothing has been selected)
• Once one row has been selected, all other checkboxes become permanently visible.
• The checkbox in the TableHead will select / deselect all rows in the Table when toggled.

Each row has its own individual unique id.

I maintain a Set called idsOfSelectedRows via a useState hook to keep track of all rows currently selected.

Each TableRow has a Checkbox which looks like this

<Checkbox
  className={
     idsOfSelectedRows.size === 0 &&
     styles.rowSelectionCheckboxStyle
  }
  onChange={() => handleRowSelectionCheckboxClick}
  checked={idsOfSelectedRows.has(row.id)}
 />

and handleRowSelectionCheckboxClick looks like this

  const handleRowSelectionCheckboxClick = event => {
    const idOfClickedRow = event.target.attributes.getNamedItem("id").value;
   //If the checkbox has just become checked then add it to the idOfSelectedRows Set, otherwise remove it.
    setIdsOfSelectedRows(
      event.target.checked
        ? new Set(idsOfSelectedRows.add(String(idOfClickedRow)))
        : () => {
            idsOfSelectedRows.delete(String(idOfClickedRow));
            return new Set(idsOfSelectedRows);
          }
    );
  };

My issue is that clicking on the checkboxes on the rows is unresponsive. I can select them all by clicking on the select all Checkbox in the TableHead but clicking on checkboxes in individual rows does not change their state ?

Here's a full CodeSandbox reproducing the exact issue. What do I need to do to make the checkboxes in the rows be toggleable ?