I am attempting to create a custom header using AG Grid and React, but am unable to render the custom component that is passed into the headerComponentFramework prop within my autoGroupColumnDefs.

The AG Grid documentation points to using headerComponentFramework, and when editing their example code with their Plunker link I am successfully able to create and edit a custom header. When I attempt to implement the same thing in my code, I'm not able to even access my component. E.g. I tried to console.log a message from my custom header component, but it didn't log. I also tried alternate props, such as headerComponent and headerGroupComponent but those didn't work either.

Sample code below:

import CustomHeaderComponent from './filePath';

autoGroupColumnDef = useMemo(() => {
  headerComponentFramework: CustomHeaderComponent
  headerName: ‘name’,
  suppressMenu: true,
  cellRendererSelector: () => {}
  pinned: left,
}), [dependencies])

gridOptions = { 
  …otherGridOptions,
  autoGroupColumnDefs
}

return (
  <AgGridComponent 
    gridOptions={gridOptions}
  />
)

export const CustomHeaderComponent = {
  console.log(‘hello world’); // doesn't log

  // do stuff 

  return (
    <div> {Custom Header} </div>
  )
}

Is headerComponentFramework the correct prop to use here? If anyone has suggestions on how to render a custom header, it would be greatly appreciated. Please let me know if I can provide additional details as well.