React ag-grid date filter clearing second date filter when first one is cleared

I have implemented server side pagination with AG-Grid using React js.

Now I am having problems with the date filter on the grid. My filter has the "AND" "OR" conditions on them. By default only one date is shown (which is fine). But once you select a date the second date picker will show along side the "AND" "OR" condition.

The problem comes when you click on the first date picker and you select 'Clear', the second date disappears from the screen and the date filter is not applied to the grid. But when you add the first filter back again, the second filter which disappeared comes back with the old filter you put there back in.

You can see an example from the official documentation of the date filter picker working correctly (apply the date filter by selecting the three lines) https://codesandbox.io/s/f86lk4?file=/src/index.js

If you clear the first date it doesn't clear the second date.

My filter params are defined like this:

var filterParams = {
  comparator: (filterLocalDateAtMidnight, cellValue) => {
    var dateAsString = cellValue;
    if (dateAsString == null) return -1;
    var dateParts = dateAsString.split('/');
    var cellDate = new Date(
      Number(dateParts[2]),
      Number(dateParts[1]) - 1,
      Number(dateParts[0])
    );
    if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) {
      return 0;
    }
    if (cellDate < filterLocalDateAtMidnight) {
      return -1;
    }
    if (cellDate > filterLocalDateAtMidnight) {
      return 1;
    }
    return 0;
  },
};

And my date column is defined like this:

  const [columnDefs, setColumnDefs] = useState([
    {
      field: 'date',
      filter: 'agDateColumnFilter',
      filterParams: filterParams,
    },
  ]);

and my default column definitions are defined like this:

  const defaultColDef = useMemo(() => {
    return {
      sortable: true,
      filter: true,
      wrapText: true,
      ensureDomOrder: true,
      enableCellTextSelection: true
    };
  }, []);

The code looks very similar to the example given by ag-grid but I have no idea why it works differently.

Does anyone have any ideas?

I found the solution, I just needed to upgrade my version of ag grid to version 31.0.3