我正在开发一个代码，目的是根据JSON文件中存储的数据量，在每页上显示有限数量的卡片。我希望单击“〉”或“〈”图标将分别转到下一页或上一页，更改卡片。
我的App.tsx看起来像这样：

import { default as data } from "./DATA.json" //contains an array of json objects.

let [page, setPage] = useState(1); //is a state that stores the beginning of pagination.

const PER_PAGE = 8; //stores how many cards will be displayed per page.

const totalPages= Math.ceil(data.length / PER_PAGE); //stores the total number of pages

import { usePagination } from "./Pagination"; 
//is a component that receives as parameter data and PER_PAGE. Inside the component there are 4 functions:

currentData(); //get current data from JSON
jump(); //jump to the next page
next(); //show the contents of the next page
prev(); //show the contents of the previous page

const _DATA = usePagination(data, PER_PAGE);

Ps：在usePagination.tsx组件中，我传递了DataBooks接口的data和itemsPerPage参数，但是，出现了错误 Cannot read properties of undefined（阅读'length'）。我想要的结果没有达到（当你转到下一页或上一页时相应地改变卡片），因为我不知道它是什么。有人帮帮我吗？我不知道该怎么办。

import { useState } from "react";
import Books from "./interfaces";

interface DataBooks {
  data: Books[];
  itemsPerPage: number;
}

export const usePagination = ({ data, itemsPerPage }: DataBooks) => {
  const [currentPage, setCurrentPage] = useState(1);
  const maxPage = Math.ceil(data.length / itemsPerPage);

  function currentData() {
    const begin = (currentPage - 1) * itemsPerPage;
    const end = begin + itemsPerPage;
    return data.slice(begin, end);
  }

  function next() {
    setCurrentPage((currentPage) => Math.min(currentPage + 1, maxPage));
  }

  function prev() {
    setCurrentPage((currentPage) => Math.max(currentPage - 1, 1));
  }

  function jump(page: number) {
    const pageNumber = Math.max(1, page);
    setCurrentPage((currentPage) => Math.min(pageNumber, maxPage));
  }
  return { next, prev, jump, currentData, currentPage, maxPage };
};

Code in codesanbox