React How to delete it only when you press the delete button and then press the OK button

I want to receive this JSON form from the server and add it automatically in the dialog. I want to automatically show the input item coffee, 15... in the dialog.

Q1) I want to delete it only when I press the DELETE button and finally press the OK button.

For example, you can't see it in the dialog by pressing the DELETE button, but if you press the cancel button, it won't be deleted. And if you open the dialog again, you can see the added items.

Q2) In order to automatically add items in the form of JSON, I need to set the key (To put items in the list, and remove the items in list), but the JSON form is a little complicated. Is there an easy way to handle it using immutable.js?

"area1": { 
             "shop": [ { "type": "coffee", "quantity": "15" }, { "type": "beef", "quantity": "3" }, ... } ],
             "warehouse": [ { "type": "coffee", "quantity": "1000" }, { "type": "beef", "quantity": "200" }, ... } ] 
           }

import React, { useRef, useState } from "react";
import { Map, List } from "immutable";
import {
  Dialog,
  DialogContent,
  DialogActions,
  TextField,
  Button,
} from "@mui/material";

export default function AutoInventoryDialog() {
  const [openDialog, setOpenDialog] = useState(false);
  const [shopType, setShopType] = useState("");
  const [shopQuantity, setShopQuantity] = useState("");
  const [TotalList, setTotalList] = useState([]);
  const [warehouseType, setWarehouseType] = useState("");
  const [warehouseQuantity, setWarehouseQuantity] = useState("");
  const dialogRef = useRef(null);
  const quantityRef = useRef(null);

  function onDismiss() {
    setOpenDialog(false);
    setWarehouseType("");
    setWarehouseQuantity("");
  }

  function onSubmit() {
    onDismiss();
  }

  function removeItem(warehouseItemId) {
    setTotalList(
      warehouseItemId.filter((item) => {
        return item.warehouseItemId !== warehouseItemId;
      })
    );
  }

  const renderItems = TotalList.length
    ? TotalList.map((item) => {
        return (
          <>
            <div style={{ height: "60px" }}>
              <TextField
                value={item.warehouseType}
                type="text"
                style={{ marginBottom: "30px" }}
              />
            </div>
            <div style={{ height: "60px" }}>
              <TextField
                value={item.warehouseQuantity}
                type="text"
                style={{ marginBottom: "30px" }}
              />
              <Button onClick={() => removeItem(item.warehouseItemId)}>
                {"DELETE"}
              </Button>
            </div>
          </>
        );
      })
    : "";

  function resetForm() {
    setWarehouseType("");
    setWarehouseQuantity("");
  }

  function addItem(e) {
    e.preventDefault();
    setTotalList([
      ...TotalList,
      {
        warehouseItemId: Date.now(),
        warehouseType: warehouseType,
        warehouseQuantity: warehouseQuantity,
      },
    ]);
    resetForm();
  }

  return (
    <>
      <Dialog open={openDialog} onClose={onDismiss} />

      <DialogContent>
        <form onSubmit={addItem}>
          {renderItems}

          <div>
            <div>{"Type"}</div>
            <div style={{ height: "60px" }}>
              <TextField
                value={inputType}
                type="text"
                onchange={onChangeInputType}
                style={{ marginBottom: "30px" }}
              />
            </div>

            <div>{"Quantity"}</div>
            <div style={{ height: "60px" }}>
              <TextField
                inputRef={quantityRef}
                value={inputQuantity}
                type="text"
                onchange={onChangeInputQuantity}
                style={{ marginBottom: "30px" }}
              />
            </div>
          </div>
        </form>
      </DialogContent>
      <DialogActions style={{ height: "40px" }}>
        <Button
          onClick={onDismiss}
          style={{ backgroundColor: "#C4C4C4", fontSize: "10px" }}
        >
          {"CANCEL"}
        </Button>
        ,
        <Button
          onClick={onSubmit}
          style={{ backgroundColor: "#4bbc06", fontSize: "10px" }}
        >
          {"OK"}
        </Button>
      </DialogActions>
    </>
  );
}