Material UI Datagrid custom checkbox behavior

I have a datagrid table with checkboxSelection enabled. This means, the checkbox is always visible, whenever the data is available or not. I am trying to render a spinner while the data is being fetch, and afterwards the checkbox itself. So I tried:

<Table
  loading={loading}
  pagination
  checkboxSelection
  isRowSelectable={isRowSelectable as SclTableProps['isRowSelectable']}
  columns={columns as SclTableProps['columns']}
  rows={rows}
  selectionModel={selectionModel}
  components={{
    BaseCheckbox: (a) => loading ? <>loading...</> : (
        <Checkbox checked={a.checked} /> // <-- this is imported from '@material-ui'
      ),
    }}
/>

Although, visual-wise it worked, the checkbox lost it's functionality. So, I tried to rebuild the selection

BaseCheckbox: (a) => loading ? <>loading...</> : (
  <Checkbox
    onClick={(params) => {
      //do something
    }}
    checked={a.checked}
  />
),

But I am not able to identify which row in the table I clicked (via row id for example).

So how should I proceed to either have the default features and selections or at least be able to grab the row data that is being selected.