I am using ag-grid for displaying data in Reactjs.

The data are getting sorted and filtered from the backend, I just need to display data in the table.

The problem I am facing is on grid load it loads the data correctly but does not load the data after applying the filter.

function DashboardServerSideTable(props: AgGridTableProps) { const { columns } = props;

// states
const [gridApi, setGridApi] = React.useState<GridApi>();
const { state, dispatch } = useContext(DashboardContext);

// Query & Mutation
const [getDashboardTableData, { data, refetch, loading }] = useLazyQuery(GET_DASHBOARD_TABLE_DATA, {
    notifyOnNetworkStatusChange: true, // This will send the network status
    fetchPolicy: 'no-cache',
});

const handleGridReady = useCallback((params) => {
let { filterModel}: IServerSideGetRowsRequest = params;
    const dataSource = {
        rowCount: 1000,
        getRows: function (params: IServerSideGetRowsParams) {
            getDashboardTableData({
                variables: {
                    tab: state.tab,
                    headerFilter: state.card,
                    filtergroup: JSON.stringify(filterModel),
                },
            }).then(res => JSON.parse(res.data.lpapqpprojectsumm.body)).then(({ datarows, size, total }) => {
                params.successCallback(datarows, total);
            }).catch(err => params.fail());
        }
    };
    params?.api?.setServerSideDatasource(dataSource);
}, []);


return (
    <div className={clsx(styles.table, 'ag-theme-alpine')}>
        <AgGridReact
            pagination
            paginationAutoPageSize
            onGridReady={handleGridReady}
            defaultColDef={defaultColDef}
            rowModelType="serverSide"
            serverSideStoreType="partial"
            cacheBlockSize={1000}
        >
            {columns.map((col) => (
                <AgGridColumn {...col} key={col.field} />
            ))}
        </AgGridReact>
    </div>
)
}