Hice comercio electrónico con un carrito para la actividad usando la API de contexto, pero cuando voy a eliminar un artículo del carrito y tengo dos, pero cuando elimino uno, elimino el otro. ¿Cómo evitarlo?

Dentro de mis proveedores, este es mi catálogo:

 import { createContext, useState } from "react" export const CatalogueContext = createContext([]) export const CatalogueProvider = ({ children }) => { const [catalogue, setCatalogue] = useState([ {id: 1, name: "Affogato", price: 10, img: affogato,}, {id: 2, name: "Café preto", price: 10, img: black,}, {id: 3, name: "Capuccino", price: 10, img: cappuccino,}, {id: 4, name: "Dalgona", price: 10, img: dalgona,}, {id: 5, name: "Doppio", price: 10, img: doppio,}, {id: 6, name: "Expresso", price: 10, img: expresso,}, {id: 7, name: "Galão", price: 10, img: galao,}, {id: 8, name: "Irlandês", price: 10, img: irish}, {id: 9, name: "Latte", price: 10, img: latte,}, {id: 10, name: "Mocha", price: 10, img: mocha,} ]) return ( <CatalogueContext.Provider value={{ catalogue }} > {children} </CatalogueContext.Provider> ) }

Este es mi carrito:

 import { createContext, useState } from "react"; export const CartContext = createContext([]) export const CartProvider = ({ children }) => { const [cart, setCart] = useState([]) const addToCart = (item) => { setCart([...cart, item]) } const removeFromCart = (item) => { const newCart = cart.filter((itemOnCart) => itemOnCart.id !== item.id) setCart(newCart) } return ( <CartContext.Provider value={{ cart, addToCart, removeFromCart}} > {children} </CartContext.Provider> ) }