حذف عنصر مع إتمام التعديل عند الحذف في ريآكت

السلام عليكم.

أود تقديم إعتذاري عن أسئلتي الكثيرة التي أنا بصدد القيام بها.

لو سمحتم،

عند إضافتي لعنصر محدد تظهر لي popup تحتوي كل المنتجات التي قمت بإضافتها

المشكل هو عند النقر على أيقونة الحذف يقع تعديل مستوى My Cart بينما لا يقع حذفها من المنتجات

الكود الذي قمت به 

App.js

// Remove From Cart
  const removeFromCart = (id) => {
    const removed = cartItems.filter(item => item.id !== id)
    setCartItems(removed)
  }

Cart.jsx

  const [qtyArray, setQtyArray] = useState(cartProducts)

  // add quantity
  const handlePlus = (index) => {
    setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty + 1 } : item))
  }

  // minus quantity
  const handleMinus = (index) => {
    setQtyArray(prev => prev.map((item,id) => id+1 === index ? { ...item, qty: item.qty - 1 } : item))
  }
  

  // calculate total price
  let totalPrice = qtyArray.reduce((acc, item) => (acc + item.qty * item.price), 0)
  
  return (
    <div className='cart-modal'>
      {
        qtyArray.map((cartProduct,index) => (
          <CartItem
            key = {index}
            cartProduct = {cartProduct}
            removeFromCart = {removeFromCart}
            handlePlus = {handlePlus}
            handleMinus = {handleMinus}
          />
        ))
      }
      <div className="cart-summary">
        <h2 className='cart-summary-title'>Total ---- {totalPrice.toFixed(3)} $</h2>
        <button type='button' onClick={()=>setModal(false)}>CLOSE</button>
      </div>  
    </div>
  )
}

CartItemjsx

    console.log(cartProduct.id)
  return (
    <div className="cart-product" >
      <img src={cartProduct.image} alt="" srcSet="" />
      <div className="cart-product-info">
        <h3 className='cart-price'>{cartProduct.price}</h3>
        <div className="quantity">
          <button 
            type='button' 
            className='plus'
            onClick={() => handlePlus(cartProduct.id)}
          >+</button>
          <h4 className='qty'>{cartProduct.qty}</h4>
          <button 
            type='button' 
            className='minus'
            disabled={cartProduct.qty < 2}
            onClick={() => handleMinus(cartProduct.id)}
          >-</button>
          <button type='button' className='remove'>
            <i className="fa-solid fa-trash"
              onClick={()=>removeFromCart(cartProduct.id)}
            ></i>
          </button>
        </div>
        <h2 className='total'>{(cartProduct.price * cartProduct.qty).toFixed(2)} $</h2>
      </div>     
    </div>
  )
}

شكرا لكم