Javascript – Warning: Each child in a list should have a unique "key" prop. but the id is already exist

I’m working on an ecommerce project and I’m trying to put all the product selected in the cart dropDown thats shows up in the icon. I did the key id but it still ask me to give an id to each child?

Where exactly am I wrong?

import React from "react";
import { connect } from "react-redux";
import CustomButton from "../costum-button/costum-button.cpn";
import CartItem from "../cart-item/cart-item.cpn";
import "./cart-dropdown.styles.scss";

const CartDropDown = ({ cartItems }) => (
  <div className="cart-dropdown">
    <div className="cart-items">
      {cartItems.map((cartItem) => (
        <CartItem key={cartItem.id} item={cartItem}/>
      ))}
    </div>
    <CustomButton>Go to checkout</CustomButton>
  </div>
);

const mapStateToProps = ({ cart: { cartItems } }) => ({
  cartItems
});

export default connect(mapStateToProps)(CartDropDown);

Cart item

import React from "react";
import "./cart-item.style.scss";

const CartItem = ({ item: { imageUrl, price, name, quantity } }) => (
  <div className="cart-item">
    <img src={imageUrl} alt="item" />
    <div className="item-details">
      <span className="name">{name}</span>
      <span className="price">
        {quantity} x ${price}
      </span>
    </div>
  </div>
);

export default CartItem;