Таблица материалов как установить размер страницы на Все

Question

Я использую React + Material Table.

Чего нужно достичь

Я хочу иметь возможность установить pageSize на 'Все', чтобы соответствовать общему количеству строк в таблице материалов.

Что я сделал

Я использую useState для создания rowsPerPage, и установите rowsPerPage в функции handleChangeRowsPerPage. Я использую переопределение компонентов для настройки разбиения на страницы и передачи rowsPerPage и обработчика его реквизитам. Я также передаю rowsPerPage параметру pageSize в MaterialTable.

Проблема, с которой я сталкиваюсь

Размер страницы не изменяется, и state.pageSize не обновляется. Несмотря на то, что props.options.pageSize и Pagination успешно обновляются с помощью onChangeRowsPerPage.

Ссылка на песочницу

import React, { useState } from "react";
import MaterialTable from "material-table";
import { TablePagination } from "@material-ui/core";

export default function ComponentOverriding() {
  const [rowsPerPage, setRowsPerPage] = useState(5);
  //updates pagination, but no re-size
  const handleChangeRowsPerPage = event => {
    //enable to set rows per page to match total count
    event.target.value === "All"
      ? setRowsPerPage(data.length)
      : setRowsPerPage(event.target.value);
  }; 

  const data = [
    { name: "Mehmet", surname: "Baran", birthYear: 1987 },
    { name: "Zerya Betül", surname: "Baran", birthYear: 2017 }
  ];
  return (
    <MaterialTable
      title="Component Override Demo"
      columns={[
        { title: "Name", field: "name" },
        { title: "Surname", field: "surname" },
        { title: "Birth Year", field: "birthYear" }
      ]}
      data={data}
      //options.pageSize updates, but no re-size
      options={{ pageSize: rowsPerPage }}
      // onChangeRowsPerPage={handleChangeRowsPerPage} //TypeError Cannot read property 'value' of undefined
      components={{
        Pagination: props => (
          <TablePagination
            {...props}
            rowsPerPageOptions={[5, 10, 20, "All"]}
            rowsPerPage={rowsPerPage}
            //updates pagination, but no re-size
            onChangeRowsPerPage={handleChangeRowsPerPage}
          />
        )
      }}
    />
  );
}