setPageSize не обновляется при изменении выбора, используя компонент TablePagination material-ui

Question

Использование таблицы реакции 7.0.0-r c .15

Привет, я работаю с TablePagination компонентом и таблицей реагирования, это мой код:

import React, { Component } from "react";
import { useTable, usePagination } from "react-table";
import { withStyles } from "@material-ui/core/styles";
import Delete from "@material-ui/icons/Delete";
import ModeEditIcon from "@material-ui/icons/Edit";

import CssBaseline from "@material-ui/core/CssBaseline";
import Table from "@material-ui/core/Table";
import TableContainer from "@material-ui/core/TableContainer";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import TablePagination from "@material-ui/core/TablePagination";
import TableFooter from "@material-ui/core/TableFooter";

import "./react-table.css";

const styles = {
  actionIcon: {
    color: "rgb(0, 0, 0, 0.54)",
    margin: "0px 10px",
    cursor: "pointer"
  },
  addButton: {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed",
    backgroundColor: "rgb(238, 105, 61)",
    color: "white"
  },
  actionIconContainer: {
    display: "flex",
    justifyContent: "center",
    flexWrap: "wrap"
  }
};

const stylesMaterial = theme => {
  return {
    table: theme.table,
    button: {
      margin: 0,
      top: "auto",
      right: 30,
      bottom: 30,
      left: "auto",
      position: "fixed",
      backgroundColor: "rgb(238, 105, 61)",
      color: "white",
      "&:hover": {
        backgroundColor: "rgba(247, 154, 123)"
      }
    }
  };
};

const IconDeleteComponent = props => {
  const { deleteData, rowData } = props;
  return (
    <Delete
      onClick={() => {
        return deleteData(rowData.row.original.id);
      }}
      style={styles.actionIcon}
    />
  );
};

const IconEditComponent = props => {
  const { showExecute, rowData } = props;

  return (
    <ModeEditIcon
      onClick={() => {
        return showExecute(rowData.row.original.id, rowData.row.id);
      }}
      style={styles.actionIcon}
    />
  );
};

const ReactTableComponent = props => {
  const showExecute = (id, index) => {
    const { router, pathName } = props;

    router.push({
      pathname: `/${pathName}/id/${id}`,
      state: { index }
    });
  };

  const {
    header1,
    header2,
    header3,
    accesor1,
    accesor2,
    accesor3,
    deleteData
  } = props;

  const data = props.data;

  const columns = [
    {
      Header: "Id",
      accessor: "id",
      show: false
    },
    {
      Header: header1,
      accessor: accesor1
    },
    {
      Header: header3,
      maxWidth: 150,
      accessor: accesor3
    },
    {
      Header: "Acciones",
      maxWidth: 250,
      Cell: row => {
        if (!row.aggregated) {
          return (
            <div style={styles.actionIconContainer}>
              <IconEditComponent rowData={row} showExecute={showExecute} />
              <IconDeleteComponent rowData={row} deleteData={deleteData} />
            </div>
          );
        }

        return null;
      }
    }
  ];

  if (accesor2) {
    columns.splice(2, 0, {
      Header: header2,
      accessor: accesor2
    });
  }

  const pageSizeOptions = [5, 10, 20, 30, 50];

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    pageOptions,
    page,
    state: { pageIndex, pageSize },
    gotoPage,
    previousPage,
    nextPage,
    setPageSize,
    canPreviousPage,
    canNextPage
  } = useTable(
    {
      columns,
      data
    },
    usePagination
  );

  return (
    /*<ReactTable
              loading={false}
              data={this.props.data}
              defaultPageSize={10}
              columns={columns}
              previousText="« Ant"
              nextText="Sig »"
              rowsText="filas"
              pageText="Página"
              ofText="de"
              loadingText="Cargando..."
              noDataText="No se encontraron datos"
            /> */
    <div>
      <TableContainer>
        <Table {...getTableProps()}>
          <TableHead>
            {headerGroups.map(headerGroup => (
              <TableRow {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <TableCell {...column.getHeaderProps()}>
                    {column.render("Header")}
                  </TableCell>
                ))}
              </TableRow>
            ))}
          </TableHead>
          <TableBody>
            {rows.map((row, i) => {
              prepareRow(row);
              return (
                <TableRow {...row.getRowProps()}>
                  {row.cells.map(cell => {
                    return (
                      <TableCell {...cell.getCellProps()}>
                        {cell.render("Cell")}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
      <TablePagination
        rowsPerPageOptions={pageSizeOptions}
        component="div"
        count={rows.length}
        rowsPerPage={pageSize}
        page={pageIndex}
        onChangePage={nextPage}
        onChangeRowsPerPage={e => {
          setPageSize(Number(e.target.value));
        }}
        labelRowsPerPage={"Registros a mostrar: "}
      />
    </div>
  );
};

export default withStyles(stylesMaterial)(ReactTableComponent);

Таблица отображается, но при изменении параметров размера страницы выберите таблицу, которая не обновляется до количества выбранных строк, похоже, что функция setPageSize не работала. Примеры реагирующих таблиц работают, но я не видел пример с компонентом TablePagination.