How to add custom column menu using ag-grid-community

Question

I want to be able to add a custom menu to the column header on click of the header cell using ag-grid. The option is available when using ag-grid-enterprise. But how can that be done using ag-grid community (the free software version). Please refer the image below

I tried adding the custom header component by ag-grid. But on enabling "filter=true" in the defaultColDefs, the menu always show the filter options. Below is the header component.

import { Component, ElementRef, ViewChild } from '@angular/core';
import { IHeaderAngularComp } from 'ag-grid-angular';
import { IHeaderParams } from 'ag-grid-community';

export interface ICustomHeaderParams {
  menuIcon: string;
}

@Component({
  selector: 'app-custom-header',
  template: `
    <div>
      <div *ngIf="params.enableMenu" #menuButton class="customHeaderMenuButton" (click)="onMenuClicked($event)">
        <i class="fa {{ params.menuIcon }}"></i>
      </div>
      <div class="customHeaderLabel">{{ params.displayName }}</div>
    </div>
  `,
  styles: [
      `
      .customHeaderMenuButton,
      .customHeaderLabel{
        float: left;
        margin: 0 0 0 3px;
      }
    `,
  ],
})
export class CustomHeader implements IHeaderAngularComp {
  public params!: IHeaderParams & ICustomHeaderParams;


  @ViewChild('menuButton', { read: ElementRef }) public menuButton!: ElementRef;

  agInit(params: IHeaderParams & ICustomHeaderParams): void {
    this.params = params;
  }

  onMenuClicked(event) {
    this.params.showColumnMenu(this.menuButton.nativeElement);
  }

  refresh(params: IHeaderParams) {
    return false;
  }
}