How to react-paginate with local data?

Question

I'm learning react and have 1 problem:

My list items page:

import React from "react";
import carsData from "../../data/CarsData";
import ReactDOM from 'react-dom';
import ReactPaginate from 'react-paginate';
import {
  CarItem,
  CarImage,
  CarBody,
  CarName,
  CarAttributesContainer,
  CarAttributesIcon,
  CarPrice,
  CarButtonLink,
} from "./CarSectionItemElements";
import MileageImg from "../../../img/mileage.png";
import EngineImg from "../../../img/engine.png";
import FuelImg from "../../../img/fuelType.png";
import TransImg from "../../../img/transmission.png";
import DriveImg from "../../../img/driveTrain.png";
import BootImg from "../../../img/bootType.png";

const CarSectionItem = () => {
  /*this is the list of items mapped from local data file i have. i want to make pagination for this list. */
  const products = carsData.map((product) => {
    return (
      <CarItem key={product.id}>
        <CarImage to={`/catalog/${product.id}`} target="_blank" >
          <img src={product.image[0]} />
        </CarImage>
        <CarBody>
          <CarName>
            <p>{product.title}</p>
          </CarName>
          <CarAttributesContainer>
            <CarAttributesIcon>
              <img src={MileageImg} />
              <span>{product.mileage}</span>
            </CarAttributesIcon>
            <CarAttributesIcon>
              <img src={EngineImg} />
              <span>{product.engine}</span>
            </CarAttributesIcon>
            <CarAttributesIcon>
              <img src={FuelImg} />
              <span>{product.fuelType}</span>
            </CarAttributesIcon>
            <CarAttributesIcon>
              <img src={TransImg} />
              <span>{product.transmission}</span>
            </CarAttributesIcon>
            <CarAttributesIcon>
              <img src={DriveImg} />
              <span>{product.driveTrain}</span>
            </CarAttributesIcon>
            <CarAttributesIcon>
              <img src={BootImg} />
              <span>{product.bootType}</span>
            </CarAttributesIcon>
          </CarAttributesContainer>
          <CarPrice>
            <p>{product.price}</p>
          </CarPrice>
        </CarBody>
        <CarButtonLink to={`/catalog/${product.id}`} target="_blank">
          {product.buttonLabel}
        </CarButtonLink>
      </CarItem>
    );
  });

  /* react paginate library */
  function PaginatedItems({ itemsPerPage }) {
    const [currentItems, setCurrentItems] = useState(null);
    const [pageCount, setPageCount] = useState(0);
    const [itemOffset, setItemOffset] = useState(0);
    const itemsPerPage = 6;
  
    useEffect(() => {
      const endOffset = itemOffset + itemsPerPage;
      setPageCount(Math.ceil(items.length / itemsPerPage));
    }, [itemOffset, itemsPerPage]);
  
    const handlePageClick = (event) => {
      const newOffset = event.selected * itemsPerPage % items.length;
      setItemOffset(newOffset);
    };
  
    return (
      <>
        <Items currentItems={currentItems} />
        <ReactPaginate
          nextLabel=">"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          marginPagesDisplayed={2}
          pageCount={pageCount}
          previousLabel="<"
          pageClassName="page-item"
          pageLinkClassName="page-link"
          previousClassName="page-item"
          previousLinkClassName="page-link"
          nextClassName="page-item"
          nextLinkClassName="page-link"
          breakLabel="..."
          breakClassName="page-item"
          breakLinkClassName="page-link"
          containerClassName="pagination"
          activeClassName="active"
          renderOnZeroPageCount={null}
        />
      </>
    );
  }


  return <>{products}</>;
};
export default CarSectionItem;

CarsSection where all the components including CarsSectionItem is stored:

import React, { useState } from "react";
import { CarsSectionContainer, CarsContainer } from "./CarsSectionElements";
import CarsFilter from "./CarsFilter/CarsFilter";
import CarSectionItem from "./СarSectionItem/CarSectionItem";
import { carsData } from "../data/CarsData";

const CarsSection = () => {


  return (
    <CarsSectionContainer>
      <CarsFilter/>
      <CarsContainer>
        <CarSectionItem />
      </CarsContainer>
    </CarsSectionContainer>
  );
};

export default CarsSection;

My local data file :

import Car1 from '../../img/car1.jpg'
import Car2 from '../../img/car2.jpg'
const carsData = [
  {
    id: '1',
    image: [Car1, Car1, Car1, Car1],
    price: '$80 000',
    brand: 'Genesis',
    title: "Genesis G90 3.8 AWD PRESTIGE 2020",
    mileage: "9300 км",
    engine: "3.3 л",
    fuelType: "Бензин",
    transmission: "Автомат",
    driveTrain: "Полный 4WD",
    bootType: "Седан",
    buttonLabel: 'Детали'
  },
  {
    id: '2',
    image: [Car2, Car2, Car2, Car2],
    price: '$80 000',
    brand: 'Genesis',
    title: "Genesis G90 3.8 AWD PRESTIGE 2020",
    mileage: "9300 км",
    engine: "3.3 л",
    fuelType: "Бензин",
    transmission: "Автомат",
    driveTrain: "Полный 4WD",
    bootType: "Седан",
    buttonLabel: 'Детали'
  },
  {
    id: '3',
    image: [Car1, Car1, Car1, Car1],
    price: '$80 000',
    brand: 'Genesis',
    title: "Genesis G90 3.8 AWD PRESTIGE 2020",
    mileage: "9300 км",
    engine: "3.3 л",
    fuelType: "Бензин",
    transmission: "Автомат",
    driveTrain: "Полный 4WD",
    bootType: "Седан",
    buttonLabel: 'Детали'
  },
  {
    id: '4',
    image: [Car1, Car1, Car1, Car1],
    price: '$80 000',
    brand: 'Genesis',
    title: "Genesis G90 3.8 AWD PRESTIGE 2020",
    mileage: "9300 км",
    engine: "3.3 л",
    fuelType: "Бензин",
    transmission: "Автомат",
    driveTrain: "Полный 4WD",
    bootType: "Седан",  
    buttonLabel: 'Детали'
  },
  ];

  export default carsData;

How can i make a pagination using my local data? I saw lots of tutorials how to make pagination using fetch data. But can't make it using local data.