AG Grid custom filter React component not calling afterGuiAttached when opened first time after upgrade to version 22

Question

We are currently in the process of upgrading AG-Grid from version 18 to version 22 and in the process I've noticed that the method afterGuiAttached isn't being called the first time our custom filter component is opened. I was wondering if maybe the component is missing something that is required in AG Grid 22 that I haven't noticed that is making this happen. Or if this is a problem with the new version of AG Grid. I've been testing the same code in AG Grid version 18 and this isn't an issue with this same code.

interface IMultiSearchFilterState {
  searchText: string;
  hideFilter?: () => void;
  currentFilter: string;
}

export class MultiSearchFilter extends React.Component<IFilterParams, IMultiSearchFilterState> {
  private searchInput = React.createRef<HTMLInputElement>();

  public state: IMultiSearchFilterState = {
    searchText: '',
    currentFilter: ''
  };

  public isFilterActive = () => {
    return this.state.searchText !== '';
  };

  public getModel = (): IAgCollectionFilter | void => {
    if (!this.isFilterActive()) {
      return;
    }

    return { filterType: 'collection', filter: this.state.searchText.split(/[ ,]+/) };
  };

  public setModel = (model?: IAgCollectionFilter) => {
    const text = model ? model.filter.join(', ') : '';
    this.setState({ searchText: text, currentFilter: text }, () =>
      this.props.filterChangedCallback()
    );
  };

  public afterGuiAttached = (params: { hidePopup: () => void }) => {
    if (this.searchInput.current) {
      this.searchInput.current.focus();
    }
    this.setState(() => ({ hideFilter: params.hidePopup }));
  };

  private handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value } = e.target;

    this.setState(() => ({ searchText: value }));
  };

  private handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const { hideFilter } = this.state;
    if (!hideFilter) {
      return;
    }

    if (this.state.searchText === this.state.currentFilter) {
      hideFilter();
      return;
    }
    this.setState(
      ({ searchText, ...otherState }) => ({
        ...otherState,
        currentFilter: searchText
      }),
      () => {
        this.props.filterChangedCallback();
        hideFilter();
      }
    );
  };

  public render(): React.ReactElement {
    return (
      <form className='multi-search-filter' onSubmit={this.handleSubmit}>
        <input ref={this.searchInput} onChange={this.handleChange} value={this.state.searchText} />
        <button type='submit'>OK</button>
      </form>
    );
  }
}