Add Pagination On Shopify Polaris Table

import { Page, Card, DataTable, Link } from "@shopify/polaris";
import React, { useState } from "react";

export default function PublishPage() {
  const rows = [
    [
      "Emerald Silk Gown",
      "emerald-silk-gown",
      "pending",
      "Edit",
    ],
    [
      "Emerald Silk Gown2",
      "emerald-silk-gown2",
      "pending",
      "Edit",
    ],
    [
      "Emerald Silk Gown3",
      "emerald-silk-gown3",
      "pending",
      "Edit",
    ],
  ];

  const itemsPerPage = 2;

  const [currentPage, setCurrentPage] = useState(1);

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  // Calculate the range of items to display based on the current page
  const startIndex = (currentPage - 1) * itemsPerPage;
  const endIndex = startIndex + itemsPerPage;

  const paginatedData = rows.slice(startIndex, endIndex);

  return (
    <Page title="Publish by product">
      <Card>
        <DataTable
          columnContentTypes={["text", "text", "text", "text"]}
          headings={["Product", "Slug", "Publish", "Edit"]}
          rows={paginatedData}
          pagination={{
            hasPrevious: currentPage != 1,
            onPrevious: () => {
              handlePageChange(currentPage - 1);
            },
            hasNext: endIndex < rows.length,

            onNext: () => {
              handlePageChange(currentPage + 1);
            },
          }}
        />
      </Card>
    </Page>
  );
}