我有一个包含项目列表的对象数组。这些项目是从动态窗体域更新的。下面是项目对象

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

当我想从动态表单中删除不需要的项时，我使用splice方法删除给定索引中的对象。这将从数组中删除正确的对象，但在UI部分，它将始终删除UI中显示的最后一项，而不是删除数组中已删除的对象。
这是我的项目数组

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

这是表格

<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>

下面是用于删除项目的close函数

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