Estoy tratando de usar un filtro externo con ag-grid en reaccionar y parece que no funciona correctamente.

Cuando selecciono la entrada en el filtro externo, no se filtra nada en la tabla. En la siguiente selección, la tabla se filtra de acuerdo con la selección anterior. Esto continúa sucediendo para todas las entradas posteriores, básicamente, la tabla se filtra para la entrada seleccionada anteriormente y no para la actual.

Utilicé el ejemplo del sitio web de ag-grid y lo modifiqué para que funcione con useState.

Las funciones principales del filtro externo son las siguientes.

 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; } };

El siguiente useEffect garantiza que el cambio de filtro solo se registre después de que se complete setState

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

A continuación se muestra el enlace de codesandbox para la demostración y el código completo

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

No entiendo por qué está pasando esto? ¿Alguien puede ayudarme con esto?