I've seen this happening when a hook was using after a conditional statement. Moving the hook usage above the conditional statement fixed the problem.

Reference: https://reactjs.org/docs/hooks-rules.html

I think I find the root cause, it's bad to call Hooks inside conditions or loops.

useRssArticleByFeedId.ts:10 Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useRef                     useRef
2. useState                   useState
3. useEffect                  useEffect
4. useEffect                  useRef
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

From https://reactjs.org/link/rules-of-hooks:

The lifecycle is the following:

1. useState is set first with undefined for userInProgressTasks
2. render
3. useEffect

That's why it asks you to safeguard values with ? because they can be undefined I'd suggest always initializing your state

  const [userInProgressTasks, setUserInProgressTasks] = useState([]);

UPDATE

Live demo of the project fixed: codesandbox

In App.tsx the Pagination component should be set like this:

<Pagination count={totalPages} page={page} onChange={handleChange} />

You don't need to manually pass event and page to this onChange function because MUI will handle these internally. More specifically, it pass to the function which page is being changed to instead of the the current page.

This is the main reason why the Pagination was not functioning. I changed the title of cards to item.title + "-" + item.id so you can check the live demo to see it works.

Syntax fixes

I fixed some syntax error so there is no error message about types.

Changes made in UsePagination.tsx

// Need to check if data is provided
const maxPage = data ? Math.ceil(data.length / itemsPerPage) : 1;

function currentData() {
  // Again this data may not be provided
  if (!data) return [];

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

Changes made in App.tsx:

// This function take an object as argument
const _DATA = usePagination({ data, itemsPerPage: PER_PAGE });

Changing this if condition from this:

if (props.items.length === 0) {

To

if (!props.items?.length) {

Should work.

Similarly if using for places,you can check using ternary operator if length exists in array of places.

How? Because items could possibly be null or undefined from apis, so the length property on array might be missing.

Moreover, using ! Not operator would make this condition true if length of items is 0 or is null or undefined or any falsy value