Warning: Each child in a list should have a unique "key" prop- Custom Pagination Component

Question

I am trying to create a custom pagination component in my React app and I am seeding this error in the console "Warning: Each child in a list should have a unique "key" prop."

I know that I need to add a key but am not sure which key to use and exactly where it would go in this code. **** key={pageNumber} ****?

Thanks.

import classnames from "classnames";
import { usePagination, DOTS } from "./usePagination";
import styled from "styled-components";
const Pagination = (props) => {
  const {
    onPageChange,
    totalProducts,
    siblingCount = 1,
    currentPage,
    pageSize,
    className,
  } = props;

  const paginationRange = usePagination({
    currentPage,
    totalProducts,
    siblingCount,
    pageSize,
  });
console.log(paginationRange);
  if (currentPage === 0 || paginationRange.length < 2) {
    return null;
  }

  const onNext = () => {
    onPageChange(currentPage + 1);
  };

  const onPrevious = () => {
    onPageChange(currentPage - 1);
  };

  let lastPage = paginationRange[paginationRange.length - 1];
  return (
    <Wrapper>
      <ul
        className={classnames("pagination-container", {
          [className]: className,
        })}
      >
        <li
          className={classnames("pagination-item", {
            disabled: currentPage === 1,
          })}
          onClick={onPrevious}
        >
          <div className="arrow left" />
        </li>
        {paginationRange.map((pageNumber) => {
          if (pageNumber === DOTS) {
            return (
              <li key={pageNumber} className="pagination-item dots">
                &#8230;
              </li>
            );
          }

          return (
            <li
              className={classnames("pagination-item", {
                selected: pageNumber === currentPage,
              })}
              onClick={() => onPageChange(pageNumber)}
            >
              {pageNumber}
            </li>
          );
        })}
        <li
          className={classnames("pagination-item", {
            disabled: currentPage === lastPage,
          })}
          onClick={onNext}
        >
          <div className="arrow right" />
        </li>
      </ul>
    </Wrapper>
  );
};

export default Pagination;```