如何使用react在Fluent UI Detaillist中添加分页

import React, { useState } from 'react';
import { DetailsList, Pagination } from '@fluentui/react';

const MyComponent = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const pageSize = 10; // 每页显示的数据量

  // 假设你有一个包含所有数据的数组
  const data = [
    // 数据项
  ];

  // 根据当前页码和每页显示的数据量，计算需要展示的数据
  const startIndex = (currentPage - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const displayedData = data.slice(startIndex, endIndex);

  // 监听页码变化的事件
  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <div>
      <DetailsList items={displayedData} />

      <Pagination
        currentPage={currentPage}
        totalPages={Math.ceil(data.length / pageSize)}
        onChange={handlePageChange}
      />
    </div>
  );
};

export default MyComponent;