how to apply selectAll and deSelectAll to the header checkbox in ag-grid react

I have added checkboxSelection to my first column and also the headerCheckBoxSelection.

columnDefs: [
  {
    minWidth: 45,
    maxWidth: 45,
    headerCheckboxSelection: true,
    checkboxSelection: true,
    lockPosition: true,
    hide: selectedHeaders.length === 0 ? true : selectedHeaders.includes('Name')
  },

But the header checkbox for select and deseltall doesn't work. I've added two callbacks for selectAll and deselectAll but I'm not sure where to add these callbacks so that I can select and deselect all rows:

const deselectAllHandler = useCallback(() => {
 gridApi.deselectAll();
}, [gridApi]);

const selectAllHandler = useCallback(() => {
 gridApi.selectAll();
}, [gridApi]);

I'm able to select individual checkboxes and retrieve the selected rows, but not able to select all and deselect all

Thanks in advance!