如何使用react将渲染与分页点击时的状态同步？

import React, { useState } from 'react';

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

  // 模拟数据源
  const data = [
    // 数据内容
  ];

  // 根据当前页码获取对应的数据
  const getDataForCurrentPage = () => {
    const startIndex = (currentPage - 1) * dataPerPage;
    const endIndex = startIndex + dataPerPage;
    return data.slice(startIndex, endIndex);
  };

  // 处理分页按钮点击事件
  const handlePageClick = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (
    <div>
      {/* 渲染数据 */}
      {getDataForCurrentPage().map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}

      {/* 渲染分页按钮 */}
      <div>
        {Array.from({ length: Math.ceil(data.length / dataPerPage) }, (_, index) => (
          <button key={index} onClick={() => handlePageClick(index + 1)}>
            {index + 1}
          </button>
        ))}
      </div>
    </div>
  );
};

export default MyComponent;