I have the following AgGrid React table:

const headers: ColGroupDef[] = [
  {
    headerName: '',
    children: [
      {
        headerName: 'IBU/Mandate',
        field: 'IBU/Mandate',
        rowGroup: true,
        hide: true
      },
      {
        headerName: 'subgroup',
        field: 'subcategory',
        rowGroup: true,
        hide: true
      }
    ]
  },
  ....
];

<AgGridReact
      columnDefs={headers}
      rowData={data}
      pagination={true}
      paginationPageSizeSelector={false}
      theme={tableTheme}
      suppressRowHoverHighlight={true}
      domLayout='autoHeight'
      onCellClicked={onCellClicked}
      groupAllowUnbalanced={true}
      suppressAggFuncInHeader={true}
      groupDefaultExpanded={1}
      groupDisplayType='multipleColumns'
    />

Some of the data can show up without having subcategory so in that case I want to disable expanding that IBU/Mandate row because on expand it will just replicate the row again.. I tried doing so using autoGroupColDef but didn't manage to get it working although it picks up the rows that have this condition correctly:

const autoGroupColumnDef = {
  cellRendererSelector: (params: any) => {
    if (params.data && params.data.subcategory === null) {
      return undefined
    }
    return {
      component: 'agGroupCellRenderer',
      params: {
        suppressCount: true,
      },
    };
  },
};

Any idea on what I'm doing wrong?