Paggination with high volume of data

I have paggination issue. I have implemented this solution:

import React, {useEffect} from 'react'
import { Pagination } from 'react-bootstrap'
import { LinkContainer } from 'react-router-bootstrap'

const Paginate = ({ pages, page, keyword = '' }) => {

  return (


    pages > 1 && (
      <Pagination >

      
        
        {[...Array(pages).keys()].map((x) => (
          <LinkContainer
            key={x + 1}
            to={keyword  ? `/search/${keyword}/page/${x + 1}`  : `/page/${x + 1}`}
          >
           
            <Pagination.Item active={x + 1 === page}>{x + 1}</Pagination.Item>
           
          </LinkContainer>
        ))}
      </Pagination>
    )
  )
}

export default Paginate

and it works fine for small amount of objects in the data base. However when the amount of products is 10,000 for example the pagination pages depending on the products by page goes to 500 pages in a line. And I tried a couple of things but I can't seem to limit the pages to 20-30 and the rest to with dots or some other way.

Can someone please advise a good solutions that I can use?

Here is the backend controller:

const getGrocery =  asyncHandler(async(req, res) => {

    
        const pageSize = 32
    
        const page = Number(req.query.pageNumber) || 1
        
        const keyword = req.query.keyword
        ? {
            name: {
                $regex: req.query.keyword,
                $options: 'i',
            },
        }
        : {}
    
        const count = await db.countDocuments({ ...keyword })
    
        const grocery =  await db.find({ ...keyword }).limit(pageSize).skip(pageSize * (page - 1)).sort({ "price": 1, "name":1 })