Имя заголовка группы ag-grid, cellRenderer и valueFormatter не работали

Question

Я пытаюсь сгруппировать строки по объекту EmploymentGroup {id: string (guid), name: string (это должно быть показано)} Я создал columnDefs следующим образом:

...

[
 {
  headerName: this.props.intl.formatMessage({ id: 'driversEmpContractType' }),
  field: 'employmentGroup',
  rowGroup: true,
  minWidth: 150,
  hide: true,
  flex: 4,
  keyCreator: (params: any) => {
   return params.value.id; // this specified by what the grouping is going on and this works fine
  },
  valueFormatter: ({ value, data }) => 'something', // do not works still getting id 
  //cellRenderer: (params: any) => 'something', // do not works still getting id 
 },
 {
  headerName: this.props.intl.formatMessage({ id: 'driversEmpDateFrom' }),
  headerTooltip: this.props.intl.formatMessage({ id: 'driversEmpDateFrom' }),
  field: "dateFrom",
  minWidth: 100,
  flex: 4,
 },

И я создал функцию для таблиц ag-grid groupRowAggNodes:

private groupRowAggNodes(nodes: any): any {
    console.log('group row agg nodes params ---------------------------------------------------')
    console.log(nodes)
    var result = {
        employmentGroup: 'test',
        dateFrom: '01-01-1990',
        dateTo: '01-01-1990',
        ....
    };
    return result;
}

И я создал функцию для таблиц ag-grid autoGroupColumnDef, и это работает для отображения нужных данных в ячейках под заголовком строки группы:

private autoGroupColumnDef(): any {
    return {
        headerName: this.props.intl.formatMessage({ id: 'driversEmpContractType' }),
        headerTooltip: this.props.intl.formatMessage({ id: 'driversEmpContractType' }),
        field: 'employmentType',
        minWidth: 200,
        flex: 4,
        cellRenderer: "agGroupCellRenderer",
        cellRendererParams: {
            innerRendererFramework: EmploymentTypeCellRendererComponent // returns translated employment type
        }
    }
}

И это всего лишь определение таблицы:

<AgGridReact
    modules={AllModules}
    onSelectionChanged={(params: any) => this.onSelectionChanged(params)}
    rowSelection='single'
    animateRows={true}
    localeText={currentTranslations?.values}
    enableBrowserTooltips={true}
    columnDefs={this.columnDefs()}
    defaultColDef={this.defaultColDef()}
    autoGroupColumnDef={this.autoGroupColumnDef()}
    groupRowAggNodes={(nodes: any) => this.groupRowAggNodes(nodes)}
    onGridReady={(params: GridReadyEvent) => this.gridAPi = params}
    rowData={this.formatViewModelDataForGroupTable()}>
</AgGridReact>

И это то, что у меня есть, все еще занятостиGroup.id. Я хочу отобразить имя занятости группы в строке заголовка группы.

График c результат с объяснениями: