Closure Issue in React Custom Hook

I wonder what’s going on here. I finally moved the variable curPage to the global scope in my custom hook as the closure doesn’t work for some weird reason. So well… the problem is solved but it doesn’t look elegant and I’m really concerned why?

This hook is responsible for pagination but it doesn’t really matter what it does. The variable let curPage = 1; that holds the value matters as it’s the value that increments everytime the function getItems runs.

import { useState } from 'react';

// let curPage = 1; I MOVED IT HERE AND WORKS BUT ... well

const usePagination = items => {
  const [itemsToRender, setItemsToRender] = useState(items.slice(0, 4));

  let curPage = 1;
  let maximumItems = 4;
  let totalPages = Math.ceil(items.length / maximumItems);

  //get 4 items per each page;
  const getItems = () => {
    curPage += 1;

    const min = (curPage - 1) * maximumItems;
    const max = curPage * maximumItems;

    setItemsToRender(state => state.concat(items.slice(min, max)));
  };

  return { getItems, itemsToRender, curPage, totalPages };
};

export default usePagination;

The hook is called in some React component function and I immediately destructure returned object.

const { getItems, itemsToRender } = usePagination(articles);

TO SUM UP THE PROBLEM: everytime the function getItems is called, the variable curPage is always 1 by default. So it will always return 2 when curPage += 1; so the logic fails as within every click for example it should grow – 1,2,3,4,5 etc.

The hook is called once and the returned function getItems is called multiple times but the variable curPage is enclosed within custom hook function body so should mutate everytime the function runs.

I don’t understand what’s going on. I will appreciate your suggestions. Thanks in advance! Maciej