title: AG Grid headerComponentFramework prop is not rendering custom component
body: <p>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 <code>headerComponentFramework</code> prop within my <code>autoGroupColumnDefs</code>.</p>
  <p>The <a href="https://www.ag-grid.com/react-data-grid/component-header/#example-custom-header-component" rel="nofollow noreferrer">AG Grid documentation</a> points to using <code>headerComponentFramework</code>, 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 <code>headerComponent</code> and <code>headerGroupComponent</code> but those didn't work either.</p>
  <p>Sample code below:</p>
  <pre><code>import CustomHeaderComponent from './filePath';
  
  autoGroupColumnDef = useMemo(() =&gt; {
    headerComponentFramework: CustomHeaderComponent
    headerName: ‘name’,
    suppressMenu: true,
    cellRendererSelector: () =&gt; {}
    pinned: left,
  }), [dependencies])
  
  gridOptions = { 
    …otherGridOptions,
    autoGroupColumnDefs
  }
  
  return (
    &lt;AgGridComponent 
      gridOptions={gridOptions}
    /&gt;
  )
  
  </code></pre>
  <pre><code>export const CustomHeaderComponent = {
    console.log(‘hello world’); // doesn't log
  
    // do stuff 
  
    return (
      &lt;div&gt; {Custom Header} &lt;/div&gt;
    )
  }
  
  </code></pre>
  <p>Is <code>headerComponentFramework</code> 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.</p>