How to paginate dynamically loaded components React

[faisol-zufaa]

I am trying to use react-paginate but I am not understanding the demo description or code sample.

This is how my code is set up
Here a component called "CateGoryResults" was generated

`
const CategoryCar = () => {
const cars = useLoaderData();

return (
    <div className=' max-w-[1440px] mx-auto'>
       //other components are here

        <div className='grid grid-cols-4 border-2 border-sky-800'>
            <aside className='col-span-1'>
                <FilterBox></FilterBox>
            </aside>

            <main className='col-span-3 border-2 border-solid border-blue-800'>
                <CateGoryResults cars={cars}></CateGoryResults>
              
            </main>
        </div>
    </div>
);

};

export default CategoryCar;`

This is inside CateGoryResults
`const CateGoryResults = ( { cars } ) => {
console.log(cars.length);

return (
    <div className='grid grid-cols-4 gap-x-6 gap-y-7 mx-10 my-6'>

        {
            cars.map( ( car, index ) => (
                <div key={ index } className=''>
                    <div className=''>
                        <Car car={ car }></Car>
                    </div>
                </div>
            ) )
        }

       

    </div>
);

};

export default CateGoryResults;`

This is car component

All data are fetched using react router dom loader from a local json file.
Now I do not understand where to call the react-paginate , and which component replaces Items component from the demo here -https://www.npmjs.com/package/react-paginate.

Please help

[faisol-zufaa]

It's ok guys, I found the solution.
This video helped.
https://www.youtube.com/watch?v=Y48V8gNUvew