Splice an object from an array in react usestate

I have an array of objects containing a list of items. The items are updated from a dynamic form field. Below is the item object

{ product_id: { name: "", price: 0, hsn: "" }, quantity: 0, cgst_amount: 0, sgst_amount: 0, igst_amount: 0, total: 0 }Ï

When I want to delete the unwanted item from the dynamic form I use the splice method to remove the object in the given index. This removes the correct object from the array but on the UI part, it will always remove the last item shown in the UI rather than removing the deleted object in the array.

This is my items array

const [items, setItems] = useState(quotation.items ? quotation.items : []);

Here is the form

        <div className="items-container mt-2">
          {items?.map((item, index) => (<div className="items">
            <div className="item-close">
              <div className="item-close-icon" onClick={() => closeItem(index)}>
                {items.length > 1 ? <Icon as={FaTimes} color="red.500" size="1.5em" /> : ""}
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="item-name">Item</FormLabel>
                <Input placeholder="Item" defaultValue={item.product_id.name} disabled={!isEdit} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="item-quantity">Quantity</FormLabel>
                <Input placeholder="Quantity" defaultValue={item.quantity} disabled={!isEdit} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="item-rate">Price</FormLabel>
                <Input placeholder="Price" defaultValue={item.product_id.price} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="hsn">HSN</FormLabel>
                <Input placeholder="HSN" defaultValue={item.product_id.hsn} disabled={!isEdit} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="cgst">CGST</FormLabel>
                <Input placeholder="CGST" defaultValue={item.cgst_amount} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="sgst">SGST</FormLabel>
                <Input placeholder="SGST" defaultValue={item.sgst_amount} disabled={true} />
              </div>
            </div>
            <div className="card-field-two">
              <div className="card-field">
                <FormLabel htmlFor="igst">IGST</FormLabel>
                <Input placeholder="IGST" defaultValue={item.igst_amount} disabled={true} />
              </div>
              <div className="card-field">
                <FormLabel htmlFor="total">Total</FormLabel>
                <Input placeholder="Total" defaultValue={item.total_amount} disabled={true} />
              </div>
            </div>
          </div>))}
          <button className="add-item-btn orange-btn" disabled={!isEdit} onClick={() => setItems([...items, { product_id: { name: "", price: 0, hsn: "" }, quantity: 0, cgst_amount: 0, sgst_amount: 0, igst_amount: 0, total: 0 }])}>Add Item</button>
        </div>

Here is the close function to remove the items

const closeItem = (index) => {
  let itemsArray = [...items];
  itemsArray.splice(index, 1);
  let newArray = [...itemsArray]
  setItems(newArray);
}