How to add dots in between page numbers in reactJS

Question

This is the code for pagination that needs to add dots if pages are more than 5. How it could be done.

  const pages = _.range(1, pageCount + 1);

  const pagination = (pageNo) => {
    setcurrentPage(pageNo);
    const startIndex = (pageNo - 1) * pageSize;
    const paginatedItem = _(ItemList).slice(startIndex).take(pageSize).value()
    setpaginatedList(paginatedItem)
  }

<nav className="d-flex justify-content-center">
              <ul className="pagination">
                {
                  pages.map((page) => (
                    <li className={page === currentPage ? "page-item active" : "page-item "}>
                      <p className="page-link"
                        onClick={() => pagination(page)}
                      >{page}</p>
                    </li>
                  ))
                }
              </ul>
            </nav>

Answer 1

<nav className="d-flex justify-content-center">
          <ul className="pagination">
            {
              pages.map((page) => (
                <li className={page === currentPage ? "page-item active" : "page-item "}>
                  <p className="page-link"
                    onClick={() => pagination(page)}
                  >{page}{page > 5 && "."}</p>
                </li>
              ))
            }
          </ul>
        </nav>