'duplicated mapping key' error occurred, during pagenation

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.

Start in dashboard/starter-example/app/ui/invoices/pagination.tsx and inspect generatePagination for total page counts above 7, especially when currentPage is 3 or totalPages - 2. Verify the pagination output in the dashboard so it has no duplicate mapping keys, includes the expected page buttons, and remains seven cells long.