反应分页上的错误

import React, { useState, useContext } from "react";
import ReactPaginate from "react-paginate";
import { ShopContext } from "./Context/ShopContext";
import Products from "./Components/Products";
import { Link } from "react-router-dom";

function PaginationProdGrid() {
  const { products } = useContext(ShopContext);
  const [currentPage, setCurrentPage] = useState(0);
  const itemsPerPage = 6;

  const displayedItems = products.slice(
    currentPage * itemsPerPage,
    (currentPage + 1) * itemsPerPage
  );


  const handlePageChange = (data) => {
    setCurrentPage(data.selected);
  };

  return (
    
      <div classname="grid md:grid-cols-3 grid-cols-1 gap-4 m-8">
        {displayedItems &amp;&amp; displayedItems.length &gt; 0 ? (
          displayedItems.map((item) =&gt; (
            <link key="{item._id}" to="{`/productInfo/${item._id}`}">
<products name="{item.name}" image="{item.image}" price="{item.price}"></products>
          ))
        ) : (
          <p classname="text-center">No products available</p>
        )}
      </div>
      <div classname="flex justify-center">
        <reactpaginate previouslabel='{"previous"}' nextlabel='{"next"}' breaklabel='{"..."}' breakclassname='{"break-me"}' pagecount="{Math.ceil(products.length" itemsperpage marginpagesdisplayed="{2}" pagerangedisplayed="{5}" onpagechange="{handlePageChange}" containerclassname="{" flex items-center text-black dark:text-white pageclassname="{" py-2 rounded-md mx-1 previousclassname="{" nextclassname="{" activeclassname='{"bg-blue-500'></reactpaginate>
</div>
    &gt;
  );
}
export default PaginationProdGrid;