'duplicated mapping key' error occurred, during pagenation

[vlkzmn]

If you use this code:
dashboard/starter-example/app/ui/invoices/pagination.tsx
when the number of pages is more than 7, the error 'duplicated mapping key' will appear. Because, under certain conditions, the generatePagination function returns an array in which there may be identical elements "...", which are then used as a key.

Also, it would be worth adding two more conditions to the generatePagination function, when the current page = 3 and the current page = total pages - 2:

export const generatePagination = (currentPage: number, totalPages: number) => {
  if (totalPages <= 7) {
    return Array.from({ length: totalPages }, (_, i) => i + 1);
  }

  if (currentPage < 3) {
    return [1, 2, 3, "...", totalPages - 2, totalPages - 1, totalPages];
  }

  if (currentPage === 3) {
    return [
      1,
      currentPage - 1,
      currentPage,
      currentPage + 1,
      "...",
      totalPages - 1,
      totalPages,
    ];
  }

  if (currentPage > totalPages - 2) {
    return [1, 2, 3, "...", totalPages - 2, totalPages - 1, totalPages];
  }

  if (currentPage === totalPages - 2) {
    return [
      1,
      2,
      "...",
      currentPage - 1,
      currentPage,
      currentPage + 1,
      totalPages,
    ];
  }

  return [
    1,
    "...",
    currentPage - 1,
    currentPage,
    currentPage + 1,
    "...",
    totalPages,
  ];
};

This option removes the problem of the lack of a button to page 4 when page 3 is active and the same effect at the end, and also makes the pagination always the same length of 7 cells.