How to open a custom column filter from a button in the header in ag-grid?

Question

I am using ag-grid in React.

I have created a custom header component and a custom filter component (both functional components).

The custom filter works fine when I use it from the filter icon in the floating filters line.

Now, I would like to open the custom filter component by pressing the filter icon in my custom header component.

Header filter button vs Floating filter button

The popup filter I want to trigger & corresponding ag-grid element

I have the option of implementing the custom filtering completely independently, but would like to use the existing integration.

Is there a way to do that?

My Custom Filter Component:

const MyCustomFilter = forwardRef((props, ref) => {
  
  const [filter, setFilter] = useState([]);

  useEffect(() => {
        filterChangedCallback();
  }, [filter]);

  useImperativeHandle(ref, () => {
    return {
      isFilterActive() {
        return filter && filter.length !== 0;
      },

      doesFilterPass(params) {
        return true;
      },

      getModel() {
        return { filter: filter, filterType: 'set', type: 'equals' };
      },

      setModel(model) {
        const filter = model ? model.filter : [];
        setFilter(filter);
      },

      onNewRowsLoaded() {
        console.log('PriorityFilter onNewRowsLoaded');
      },

      onAnyFilterChanged() {
        console.log('PriorityFilter onAnyFilterChanged');
      },

      getModelAsString(model) {
        return filter.join(',');
      },

      afterGuiAttached(params) {
      },
    };
  });

  const onChanged = useCallback((newSelectedOptions) => {
    setFilter(newSelectedOptions);
  }, []);
  return <PrioritySetSelect onSelectionChanged={onChanged} selectedPriorityKeysInitial={filter} />;
});

export default PriorityFilter;

My Custom Header Component:

const CustomColumnHeader = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => {
    return {

      init(params) {
        return;
      },

      refresh(params) {
        return false;
      },

      destroy() {
        return;
      },
    };
  });

  const handleFilterClick = () => {
      //TODO: trigger ag-grid filter popup

  };

  return (
    <div>
      ....
      <FilterIcon onClick={handleFilterClick} />
    </div>
  );
});

export default CustomColumnHeader;