如何更改表分页的MaterialUI onPageChange操作

import React, { useState } from 'react';
import { Table, TablePagination } from '@material-ui/core';

const YourComponent = () => {
  const [page, setPage] = useState(0); // 当前页码
  const [rowsPerPage, setRowsPerPage] = useState(10); // 每页显示的行数

  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = (event) => {
    setRowsPerPage(parseInt(event.target.value, 10));
    setPage(0);
  };

  // 假设你有一个名为data的表格数据数组
  const data = [...];

  const renderedData = data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);

  return (
    <div>
      <Table>
        {/* 表格内容 */}
      </Table>
      <TablePagination
        rowsPerPageOptions={[5, 10, 20]} // 每页显示的行数选项
        component="div"
        count={data.length} // 总行数
        page={page} // 当前页码
        rowsPerPage={rowsPerPage} // 每页显示的行数
        onChangePage={handleChangePage} // 页码变化回调
        onChangeRowsPerPage={handleChangeRowsPerPage} // 每页显示行数变化回调
      />
    </div>
  );
};

export default YourComponent;