Re-render array of objects after using array.splice() (Next.js)

Question

Im trying to find a way to re-render my array of object that are mapped so that when i remove an object, the object disappears on the front end to sync with the back end.

Here's how i initiated my array:

interface cartitems{
  id: string,
  price: string
}
const CartItems: cartitems[] = [];
const [cart, setCartItems] = React.useState(CartItems);

Cart items are inititally mapped into the front-end:

{cart.map((item) => (
        <div className="cartcontainer">
            <p key={item.id} style={{display:"inline-block", marginTop:"auto", marginBottom:"auto",float:"left"}}>NFT ID: {item.id}</p>
            <p style={{display:"inline-block", marginTop:"auto", marginBottom:"auto",float:"left"}}>Price: {item.price}</p>
            <button
            style={{ float: "right", width: 40, height: 40, fontSize: 20, borderRadius:12, display: "block" }}
            onClick={() => cart.forEach(function(value){console.log(value.id + item.id) ; removeCartItemHandler(value.id.includes(item.id) ? cart.indexOf(value) : -1)})}
            >
            X
            </button>
        </div>
        ))}

Then when i click the X on my button it triggers the function that splices the object out:

function removeCartItemHandler(index) {
    console.log(index)
    if (index != -1) {
      cart.splice(index, 1);
    }
    console.log(cart)
  }