Data grid row selection issue

When we select row one by one to all, the all row selector checkbox does not get checked.
I have the rowSelection function as it was mentioned in the documentation.

const rowSelection = {
    showCheckbox: true,
    enableShiftSelect: true,
    onRowsSelected: onRowsSelected,
    onRowsDeselected: onRowsDeselected,
    selectBy: {
      keys: {
        rowKey: 'id',
        values: selectedRows
      }
    }
  };

These are my custom functions :-
const onRowsSelected = rowArr => {
let rws = [],
sd = [...selectedRows, ...rowArr.map(r => r.row.id)];
setSelectedRows(sd);
};

const onRowsDeselected = rowArr => {
let rws = [],
sd = selectedRows.filter(
i => rowArr.findIndex(r => r.row.id === i) === -1
);
setSelectedRows(sd);
};

I have using the version : "react-data-grid": "5.0.4"