I have looked everywhere, watched videos and still couldn't get the logic behind adding ellipsis in pagination.

I have created this component Pagination (please note this is just a sample component to demonstrate my question)

export const Pagination (props) {
const {maxPages, pageNumber} = props

const totalPageNumbers = []

for(let i = 1; i<= maxPages; i++){
totalPageNumbers.push(i)
} 

return (
<div>
<button disabled={pageNumber === 1}>prev</button>

{
totalPageNumbers.map(item, i) => (
<button onClick={() => someFunction()}> {item} </button>)
}
<button disabled={pageNumber === maxPages}>prev</button>
</div>

)}

• totalPageNumbers is an array of the total pages
• maxPages is a string of the total number
• pageNumber is the current page

I would like to show something like this if total pages are 5 or more 1, 2, 3, 4, ..., 5

if less than 5, it should be 1, 2, 3, 4

Right now everything works fine, but all pages are listed due to the map method above, so if I have 100, it will list 100. I would like to limit that number so it's cleaner. ellipsis no need to be clickable as long as they look like the example above, I will be super happy. Thanks a lot in advance!

Please help me with this logic, I have been stuck at this for the last 5 hours :(