React不会删除列表中的旧组件

我正在尝试使用钩子在React中创建一个简单的分页组件。以下是分页器组件的代码:

import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
import { Center, ButtonGroup, Button, IconButton } from "@chakra-ui/react";
import { useState, useEffect } from "react";

function range(start, end) {
  return Array.apply(0, Array(end)).map((element, index) => index + start);
}

export default function Paginator({
  curPage,
  pageCnt,
  incPage,
  setPage,
  decPage,
}) {
  const [offset, setOffset] = useState(5);

  if (pageCnt >= 2) {
    return (
      <Center mt="2">
        <ButtonGroup size="sm" variant="outline" isAttached>
          <IconButton
            icon={<ChevronLeftIcon boxSize={5} />}
            onClick={() => {
              decPage();
              window.scrollTo(0, 0);
            }}
          />
          {console.log(offset, curPage)}
          {range(offset - 5, offset).map((p, idx) => (
            <Button
              key={idx}
              onClick={() => {
                setPage(p + 1);
                window.scrollTo(0, 0);
              }}
            >
              {p + 1}
            </Button>
          ))}
          <IconButton
            icon={<ChevronRightIcon boxSize={5} />}
            onClick={() => {
              incPage();
              if (offset - curPage < 2) setOffset((o) => o + 5);
              window.scrollTo(0, 0);
            }}
          />
        </ButtonGroup>
      </Center>
    );
  }
}

最初,我只想显示从1到5的按钮。一旦 curPage 达到5,我想将偏移量移动5,以便按钮更新并显示范围5到10。但是,当偏移量更新5个新按钮添加到列表中时,我看到了5-15个按钮,我做错了什么?请帮忙!