Cuando hago clic en el botón Eliminar en cada elemento, quiero eliminar el elemento con un filtro. Pero no sé cómo resolverlo correctamente. Estoy un poco confundido en este punto. Espero que alguien pueda explicar esto. Muchas gracias.

cartSlice.js

 const cartSlice = createSlice({ name: 'cart', initialState:{ products: [], quantity: 0, total: 0, }, reducers: { deleteItem: (state, action) => { //filter right here state.products = action.payload.idItem; state.quantity -= 1; state.total -= action.payload.price * action.payload.quantity; }, }, });

Carrito.jsx

 const Cart = (props) => { const dispatch = useDispatch(); const cart = useSelector((state) => state.cart); const items = useSelector((state) => state.cart.products); const handleDeleteItem = (idItem, price, quantity) => { const filter = items.filter((item) => item.itemId !== idItem); console.log('idItem', idItem); console.log('filter', filter); dispatch(deleteItem({ idItem, price, quantity })); }; return ( <> {cart.products.map((product) => ( <tr className={styles.body} key={product._id}> <td className={styles.column}> <span className={styles.quantity}>{product.quantity}</span> </td> <td className={styles.column}> <span className={styles.total}>${product.price * product.quantity}</span> </td> <td className={styles.column}> <button onClick={() => handleDeleteItem(product.idItem, product.price, product.quantity)} className={styles.deleteItem} > Delete </button> </td> </tr> ))} </> ); }; export default Cart;

Imagen del botón