我有这个错误：未捕获错误：超过最大更新深度。这可能发生在组件重复调用组件内的setState WillUpdate或组件的didUpdate。React限制嵌套更新的数量，以防止无限循环。

我不知道为什么是错误，有人能帮忙吗？

应用程序。tsx文件：

const [showPerPage] =useState(1);
const [pagination, setPagination] = useState({ start: 0, end: showPerPage, });


const onPaginationChange = (start, end) => { 
setPagination({ start, end });
};

<Grid container lg={12} xs={12} sm={12}> {list.slice(pagination.start, pagination.end).map((post) => (
 <h5>{post.id}</h5> ))
} 

<UsePagination 
showPerPage={showPerPage}
onPaginationChange={onPaginationChange} 
total={list.length} /> 
</Grid>

ReactJS组件代码：UsePagination。tsx文件

import React, { useState, useEffect } from 'react';

export const UsePagination = ({ showPerPage, onPaginationChange, total }) => {
  const [counter, setCounter] = useState(1);
  const [numberOfButtons] = useState(Math.ceil(total / showPerPage));

  useEffect(() => {
    const value = showPerPage * counter;
    onPaginationChange(value - showPerPage, value);
  }, [counter]);

  const onButtonClick = (type) => {
    if (type === 'prev') {
      if (counter === 1) {
        setCounter(1);
      } else {
        setCounter(counter - 1);
      }
    } else if (type === 'next') {
      if (numberOfButtons === counter) {
        setCounter(counter);
      } else {
        setCounter(counter + 1);
      }
    }
  };
  return (
    <div className="d-flex justify-content-center">
      <nav className="hd-pagination">
        <ul className={'hd-pagination__wrapper'}>
          <li className="hd-pagination__item hd-pagination__button">
            <button
              type="button"
              data-testid="pagination-prev-button"
              onClick={() => onButtonClick('prev')}
              className="hd-pagination__link"
            >
              pre
            </button>
          </li>
          {new Array(numberOfButtons).fill('').map((el, index) => (
            <li
              key={el}
              className={`hd-pagination__item ${index + 1 === counter ? 'active' : null}`}
            >
              <button
                type="button"
                data-testid="pagination-button-number"
                data-automation-id="instantCheckout-pagination-button"
                onClick={() => setCounter(index + 1)}
                className={`hd-pagination__link`}
              >
                {index + 1}
              </button>
            </li>
          ))}
          <li className={'hd-pagination__item hd-pagination__button'}>
            <button
              type="button"
              data-testid="pagination-next-button"
              onClick={() => onButtonClick('next')}
              className={'hd-pagination__link'}
            >
              Next
            </button>
          </li>
        </ul>
      </nav>
    </div>
  );
};