Как перезагрузить новые строки в Ag-Grid после вызова сервера на onPaginationChanged

Question

Я пытаюсь использовать AG Grid с пагинацией на стороне сервера.Я могу:

• Вызвать данные с сервера.
• Обновить сетку новыми строками
• Изменить общее количество страниц

Однако я не могу:

• Обновить сетку новыми данными после нажатия на следующую / предыдущую страницу.Сетка показывает пустую таблицу.Я думаю, что мне нужно добавить функцию для обновления сетки, может быть или что-то подобное.

Я использую этот поддельный сервер, чтобы проверить его https://reqres.in/

Это моя попытка здесь:

import React, { Component } from "react";
import "./App.css";
import { AgGridReact } from "ag-grid-react";
import { LicenseManager } from "ag-grid-enterprise";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

const KEY =
  "YOUR-KEY-HERE";
LicenseManager.setLicenseKey(KEY);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      per_page: 3,
      total: null,
      total_pages: null,
      columnDefs: [
        {
          field: "id",
          headerName: "ID"
        },
        {
          field: "first_name",
          headerName: "First Name"
        },
        {
          field: "last_name",
          headerName: "Last Name"
        },
        {
          field: "email",
          headerName: "Email"
        }
      ],
      data: []
    };
  }

  componentDidMount() {
    this.fetchApi(1);
  }

  fetchApi = page => {
    fetch(`http://reqres.in/api/users?page=${page}`)
      .then(data => data.json())
      .then(resp => {
        this.setState(resp);
      });
  };
  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
    const that = this;
    setTimeout(() => {
      const datasource = {
        getRows(params) {
          params.successCallback(that.state.data, that.state.total);
        }
      };
      this.gridApi.setServerSideDatasource(datasource);
    }, 2000);
  };

  onPaginationChanged = event => {
    this.fetchApi(event.api.paginationProxy.currentPage + 1);
    // The Grid show an empty table here !
  };

  render() {
    const { data, columnDefs, per_page } = this.state;
    return (
      <div
        className="ag-theme-balham"
        style={{
          height: "500px",
          width: "600px"
        }}
      >
        <AgGridReact
          columnDefs={columnDefs}
          rowModelType="serverSide"
          rowData={data}
          pagination
          paginationPageSize={per_page}
          onGridReady={this.onGridReady}
          onPaginationChanged={this.onPaginationChanged}
        />
      </div>
    );
  }
}

export default App;