Реагировать на пользовательский хук Пагинация «данные» не определена

У меня есть API, который отображает категории музыки в браузере, и я пытаюсь создать собственный хук для разбиения на страницы, но я продолжаю получать эту ошибку, объект не повторяется. Я новичок в пользовательских хуках, и мне действительно может понадобиться помощь. Может ли кто-нибудь пролить свет на то, как это исправить?

Пользовательский крючок

`import React, {useState} from 'react';
import getToken from '../api/getToken';

const usePagination = (initialState) => {
    const {categoriesPerPage, data, startFrom} = initialState;
    const perPage = categoriesPerPage ? categoriesPerPage : 5;
    const pages = Math.ceil(data.length / perPage);
    const pagination = [];
    const [currentPage, setCurrentPage] = useState(startFrom <= pages ? startFrom : 1);
    const [slicedData, setSlicedData] = useState([...data].slice((currentPage -1) * perPage, currentPage * perPage));

    let ellipsisLeft = false;
    let ellipsisRight = false;
    for(let i = 1; i <= pages; i++) {
        if (i === currentPage) {
            pagination.push(
                {id: i, current: true, ellipsis: false}
            );
        } else {
            if (i > pages - 1 || i === currentPage -1 || i === currentPage + 1){
                pagination.push(
                    {id: i, current: false, ellipsis: false}
                );
            } else if (i > 1 && i < currentPage && !ellipsisLeft) {
                pagination.push(
                    {id: i, current: false, ellipsis: true}
                );
                ellipsisLeft = true;
            }else if (i < pages && i > currentPage && !ellipsisRight) {
                pagination.push(
                    {id: i, current: false, ellipsis: true}
                );
                ellipsisRight = true;
            }
        }
    }
    const changePage = (page, e) => {
        e.preventDefault(); 
        if (page !== currentPage) {
            setCurrentPage(page);
            setSlicedData([...data].slice((page - 1) * perPage, page * perPage))
        }
    }
    const goToPrevPage = (e) => {
        e.preventDefault();
        setCurrentPage(prevVal => prevVal - 1 === 0 ? prevVal : prevVal - 1);
        if (currentPage !== 1) {
            setSlicedData([...data].slice((currentPage - 2) * perPage, (currentPage - 1) * perPage));
        }
    }
    const goToNextPage = (e) => {
        e.preventDefault();
        setCurrentPage(prevVal => prevVal === pages ? prevVal : prevVal + 1);
        if (currentPage !== pages) {
            setSlicedData([...data].slice(currentPage * perPage, (currentPage + 1) * perPage));
        }
    }
    return {
        slicedData,
        pagination,
        prevPage: goToPrevPage,
        nextPage: goToNextPage,
        changePage
    }
}

export default usePagination;`

Компонент пагинации

`import React, {Fragment} from 'react'

import usePagination from '../customHook/usePagination'

const Pagination = (props) => {
const {categoriesPerPage, data, startFrom } = props;
  const [slicedData, pagination, prevPage, nextPage, changePage] = usePagination({categoriesPerPage, data, startFrom});
  return (
    <Fragment>
        <nav className='pagination'>
                <a href='/#' onClick = {props.prev} className='pagination-prev'>Prev</a>
                <a href='/#' onClick = {props.next} className='pagination-next'>Next</a>
                <ul className='pagination-list'>
                {pagination.map(page => {
                    if (!page.ellipsis) {
                        return <li key = {page.id}>
                            <a 
                            href='#'
                            onClick = {(e) => changePage(page.id, e)}
                            >
                                {page.id}
                            </a>
                        </li>
                        
                    }else {
                        return <li key = {page.id}>
                            <span className='pagination-ellipsis'>&hellip;</span>
                        </li>
                    }
                })}
                </ul>
            </nav>
    </Fragment>
  )
}

export default Pagination`

app.js

`import Header from './Header';

import { useEffect, useState } from 'react';
import getInitalCategories from '../api/getInitalCategories';
import Pagination from './Pagination';

function App() {
    const [categories, setCategories] = useState([]);
    
    useEffect(() => {
        getInitalCategories()
            .then(data => setCategories(data.items))
            .catch(e => console.info('oh no!', e));
    }, []);
    console.info(categories)
    return (
        <div className = "App">
            <Header />
            <section
                style = {{
                    display: 'flex',
                    flexWrap: 'wrap',
                    alignContent: 'space-between',
                    justifyContent: 'space-between',
                }}
            >
                {categories.map(cat => (
                    <div onClick = {() => {}} style = {{ cursor: 'pointer' }}>
                        <h2 style = {{ textAlign: 'center', fontWeight: 200 }}>{cat.name}</h2>
                        <img
                            src = {cat.icons[0].url}
                            alt = {cat.name}
                            style = {{
                                height: cat.icons[0].height,
                                width: cat.icons[0].width,
                                borderRadius: '10%',
                            }}
                        />
                    </div>
                ))}
            </section>
            <Pagination data = {categories} categoriesPerPage = {5} startFrom = {5}/>
        </div>
    );
}

export default App;`