I am trying to use external filter with ag-grid in react and it does not seem to work properly.

When I select the input on the external filter, nothing in the table gets filtered. On the next selection the table gets filtered according to the previous selection. This continues to happen for all subsequent inputs, basically the table gets filtered for the previously selected input and not the current one

I have used the example from the ag-grid website and modified it to work with useState.

They main functions for the external filter are as follows.

  const isExternalFilterPresent = () => {
    return true;
  };

  const doesExternalFilterPass = (node) => {
    switch (filterVal) {
      case "below25":
        return node.data.age < 25;
      case "between25and50":
        return node.data.age >= 25 && node.data.age <= 50;
      case "above50":
        return node.data.age > 50;
      case "dateAfter2008":
        return asDate(node.data.date) > new Date(2008, 1, 1);
      default:
        return true;
    }
  };

The following useEffect ensures that the filter change is only registered after setState is complete

  useEffect(() => {
    if (!!gridApi) {
      gridApi.onFilterChanged();
    }
  }, [filterVal, gridApi]);

Below is the codesandbox link for the demo and the complete code

https://codesandbox.io/s/ag-grid-external-filter-j6tru

I do not understand why this is happening? Can anyone help with this?