Check the render method of `CartSidebar`. See https://reactjs.org/link/warning-keys for more information

Компонент CardSidebar.jsx не отображается при добавлении на Cart.jsx Добавил ключ все равно не работает не могу понять из за чего

import CartSidebar from 'components/CartSidebar';
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'


export default function Cart() {
const cart = useSelector((state)=> state.cart)
console.log(cart);
  return (
   
  <div>
    
    {cart?.cartItems.map(cartItem =>(
      <CartSidebar cartItem={cartItem}  key={cartItem.id}/>
    ))}         
        </div>

  )
}

CardSidebar.jsx

import React,{useEffect} from 'react'
import Button from 'components/Button'
import { X } from 'react-feather'
import { useDispatch, useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { addToCart, decreaseCart, removeFromCart, clearCart, getTotals } from './../../app/reducers/cartSlice'



export default function CartSidebar() {
const cart = useSelector((state)=> state.cart)
const dispatch = useDispatch()




useEffect(()=> {
dispatch(getTotals());
}, [cart, dispatch])

const handleRemoveCart = (cartItem) => {
  dispatch(removeFromCart(cartItem))
 }

 const handleDecreaseCart = (cartItem)=> {
  dispatch(decreaseCart(cartItem))
 }

 const handleIncreaseCart = (cartItem) => {
  dispatch(addToCart(cartItem))
 }

 const handleClearCart = () => {
  dispatch(clearCart())
 }
 
  return (
    <div 
      className="offcanvas offcanvas-end fixed bottom-0 flex flex-col max-w-full invisible bg-clip-padding outline-none transition duration-300 ease-in-out top-0 right-0 border-none w-96 bg-white shadow-lg"
      tabIndex="-1"
      id="cartOffcanvas"
      aria-labelledby="offcanvasRightLabel">
      <div className="offcanvas-header flex items-center justify-between p-4">
        <h3
          className="offcanvas-title mb-0 text-xl text-slate-900"
          id="offcanvasRightLabel">
          Корзина
        </h3>
        <X
          className="h-5 w-5 stroke-slate-900 cursor-pointer"
          type="button"
          data-bs-dismiss="offcanvas"
          aria-label="Close"
        />
        
      </div>
      <div className="offcanvas-body flex-grow p-4 overflow-y-auto">
        {cart.cartItems.length === 0 ?(
               <div  
               style={{
                display:'block',
                textAlign:"center",
                justifyContent:'center',
                alignItems:'center',
                marginTop:'10px'
               }}>
               <p>Нет товаров в корзине</p>
               <div><Link to={"/"}>
               <h1>Вернутся к просмотру товаров</h1>
              <div style={{
                display:'flex',
                justifyContent:'center',
                textAlign:'center',
                alignItems:'center',}}><img src="https://www.salesinfinite.com/images/featured/ecommerce.jpg" alt="" width='300px'/>
                </div>
               </Link>
               </div>
               </div>

         ):( 
   <div>
    <div>
      {cart.cartItems?.map(cartItem =>(
        <div key={cartItem.id}  style={{border:'1px solid' ,padding:"5px" ,borderRadius:'5px', margin:'5px 0'}}>
              <div>
                  <div  style={{display:"inline-flex", justifyContent:"space-around"}}>
                  <img src={cartItem.pictures[0]} alt={cartItem.title} 
                  style={{
                    width:"100px"
                  }}
                  />
                  <div className='m-1' style={{display:"block"}}>
                  <h1 className='w-200px flex '>{cartItem.title}</h1>
                  {cartItem.sizes?.map(cartItem => <h1 style={{margin:'10px 0'}}>Размер: {cartItem.sizeLabel}</h1>)}
                  {cartItem.sizes?.map(cartItem => <h1>Цена: {cartItem.price}₽</h1>)}
                   <div style={{width:"100px",height:'30px', margin:'10px 0', justifyContent:'flex-end'}}><Button icon="delete" 
                     onPress={()=> handleRemoveCart(cartItem)}/>
                   </div>
                  </div>
                  </div>
                  
                  <div style={{display:'flex', justifyContent:'space-around'}}>
                 <div>
                 <h1>Количество</h1>
                  <div style={{display:'flex',  width:'100px',justifyContent:'center',textAlign:'center', alignItems:'center',}}>
                      <div style={{display:'flex',border:"1px solid",padding:'5px 15px 5px 15px',borderRadius:'5px',}}>
                      <span style={{ cursor:'pointer',}}  onClick = {() => handleDecreaseCart(cartItem)}>-</span>
                      <h1 style={{margin:'0 20px'}}>{cartItem.cartQuantity}</h1>
                      <span  style={{ cursor:'pointer'}} onClick={() => handleIncreaseCart(cartItem)}>+</span>
                      </div>
                  </div>
                 </div>
                   <div>
                   <h1>Общая сумма</h1>   
              <div style={{display:'flex',border:"1px solid",padding:'5px 15px 5px 15px',borderRadius:'5px',justifyContent:'center',textAlign:'center', alignItems:'center'}}>
             <h1>{cartItem?.sizes.map(cartItem=> cartItem.price)*cartItem.cartQuantity}</h1>
              </div>
                   </div>
                  </div>
              </div>
        </div>
      ))}
                <div>
                  <Button title={"Очистить корзину"} onPress={()=> handleClearCart()}/>
                </div>
                Общая сумма
                {/* <span>{cart.cartTotalAmount}</span>            */}
          </div>
         </div>
        )}
      </div>
    </div>
  )
}