我不喜欢像“为什么代码不工作？”这样的问题，但我找不到问题的解决方案。我有一个react组件，包括一个表和分页编号，如下所示：

分页数字工作良好，但我的问题是，当我导航到特定页面输入页码到输入字段，如果它是超过5然后数字1，2，3，4，5，6 ...太多，如下所示：

下面是我的代码：

import React, {useState, useEffect} from "react";
import Table from 'react-bootstrap/Table';
import Pagination from 'react-bootstrap/Pagination';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as cityService from "../service/CityService";
import Button from "react-bootstrap/Button";
import {useNavigate} from "react-router-dom";
import HeaderPanel from "./HeaderPanel";

function CityTable() {
    const [selectedPageNumber, setSelectedPageNumber] = useState(1);
    const [perPage, setPerPage] = useState(5);
    const [totalElement, setTotalElement] = useState(0);
    const [currentData, setCurrentData] = useState([]);
    const [pageNavigationNumber, setPageNavigationNumber] = useState(1);
    const [cityName, setCityName] = useState('');

    const totalPages = Math.ceil(totalElement / perPage);
    let navigate = useNavigate();

    const changeSelectedPageNumber = (pageNumber) => {

        // setPageNavigationNumber(pageNumber);
        setSelectedPageNumber(pageNumber);
    };

    const changePageSize = (event) => {
        const newPerPage = parseInt(event.target.value, 10);
        setSelectedPageNumber(1);
        setPerPage(newPerPage);
    };

    const findCities = async (cityName) => {
        let result = await cityService.getCityPage(cityName, selectedPageNumber - 1, perPage, sessionStorage.getItem('jwtToken'));
        setCurrentData(result.data.content);
        setTotalElement(result.data.totalElements);
    };

    const handleRowClick = (item) => {
        sessionStorage.setItem('id', item.id);
        sessionStorage.setItem('cityname', item.name);
        sessionStorage.setItem('photo', item.photo);
        navigate("/details")

    }

    const addDefaultSrc = (ev) =>
    {
        ev.target.src = require('../assets/nophoto.png');
    }

    useEffect(() => {
        findCities(cityName, selectedPageNumber, perPage);
    }, [selectedPageNumber, perPage]);

    return (
        <div>
            <HeaderPanel></HeaderPanel>
            <input type={"search"}
                   placeholder={"Search City"}
                   onChange={e => setCityName(e.target.value)}
            ></input>
            <Button onClick={() => findCities(cityName, selectedPageNumber, perPage)}>Search</Button>
            <Table striped bordered hover>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Photo</th>
                </tr>
                </thead>
                <tbody>
                {currentData.map((city) => (
                    <tr key={city.id} onClick={() => handleRowClick(city)}>
                        <td>{city.id}</td>
                        <td>{city.name}</td>
                        <td><img onError={addDefaultSrc} width={50} src={city.photo}/></td>
                    </tr>
                ))}
                </tbody>
            </Table>
            <div className="d-flex justify-content-between align-items-center">
                <Pagination className="justify-content-lg-center">
                    <select value={perPage} onChange={changePageSize}>
                        <option value="5">5</option>
                        <option value="10">10</option>
                        <option value="15">15</option>
                    </select>
                    <Pagination.Prev
                        onClick={() => changeSelectedPageNumber(selectedPageNumber - 1)}
                        disabled={selectedPageNumber === 1}
                    />
                    {Array.from({length: totalPages+1}, (_, i) => i)
                        .slice(selectedPageNumber <= 5 ? 1 : selectedPageNumber - 5, selectedPageNumber < 5 ? 10 : selectedPageNumber + 6)
                        .map(page => (
                            <Pagination.Item
                                key={page}
                                active={page === selectedPageNumber}
                                onClick={() => changeSelectedPageNumber(page)}
                            >
                                {page}
                            </Pagination.Item>

                        ))
                    }
                    <Pagination.Next
                        onClick={() => changeSelectedPageNumber(selectedPageNumber + 1)}
                        disabled={selectedPageNumber === totalPages}
                    />
                </Pagination>
            </div>
            Page number:
            <input type={"number"}
                   placeholder={"Go to page"}
                   value={pageNavigationNumber}
                   onChange={e => setPageNavigationNumber(e.target.value)}></input>
            <Button onClick={() => changeSelectedPageNumber(pageNavigationNumber)}>Go to page</Button>
        </div>
    );
}

export default CityTable;

我对这句台词表示怀疑：

{Array.from({length: totalPages+1}, (_, i) => i)
                        .slice(selectedPageNumber <= 5 ? 1 : selectedPageNumber - 5, selectedPageNumber < 5 ? 10 : selectedPageNumber + 6)

当我最后在按钮上调用changeSelectedPageNumber()函数时，也许我错过了什么。
我哪里错了？