Why page navigation numbers are not working correctly in my React Code?

I do not like questions like "Why code is not working?" but I cannot find solution to my problem. I have a react component including a table and pagination numbers as follow:

Pagination numbers are working good but my problem is that, when I navigate to specific page by entering Page number into input field, and if it is more than 5 then the numbers 1,2,3,4,5,6... going too much as follows:

Here is my code:

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;

I am suspicious of the line:

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

When I call changeSelectedPageNumber() function on button at last, maybe I am missing something.

Where am I making mistake?

Whenever you enter something in the input field, it is getting converting into string and that is why you are getting a problem here, you need to convert your input from string to number and do the Math calculation.

You can use parseInt or + (shortened operator) for converting into a number.

onChange={e => setPageNavigationNumber(+e.target.value)}></input>