React ) How to access specific object in the list for save the useState

https://codesandbox.io/s/warehouse-shop-managing-system-5w9b3?file=/src/App.js

I’m making a dialog that automatically stores the inventory of the warehouse.

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

Q1) There are two objects in the list. How can I store it in the list sequentially using forEach, map, etc?

(ReactHooks or ClassComponent)

  function autoLoad() {
    db.area1.warehouse.forEach(
      (item) => {
        setInputType(...inputType, item.type);
        setInputQuantity(...inputQuantity, item.quantity);
      },
      setItemList([
        ...itemList,
        {
          itemType: "warehouse",
          itemId: Date.now()
        }
      ])
    );
  }

Q2) I want to delete it only when I press the Hide_button and finally press the Final_Save 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.

Is it right to make a separate list for deletion and a list for hiding?
or using Callback?

 const renderItemList = itemList.length
    ? itemList.map((item) => {
        return (
          <>
            <div>
              <div style={{ height: "60px" }}>
                <TextField
                  value={item.inputType}
                  type="text"
                  style={{ marginBottom: "30px" }}
                />
              </div>
              <div style={{ height: "60px" }}>
                <TextField
                  value={item.inputQuantity}
                  type="text"
                  style={{ marginBottom: "30px" }}
                />
              </div>

              <div>{hideButton(item)}</div>
            </div>
          </>
        );
      })
    : "";

  function hideButton(item) {
    return (
      <Button
        onClick={() => removeItemInList(item.itemId)}
        style={{
          backgroundColor: "#2db7e2",
          fontSize: "14px",
          marginBottom: "30px"
        }}
      >
        {"Hide_Item"}
      </Button>
    );
  }
  const removeItemInList = (itemId) => {
    setItemList(
      itemList.filter((item) => {
        return item.itemId !== itemId;
      })
    );
  };

import "./styles.css";
import {
  TextField,
  Tooltip,
  MuiButton,
  Button,
  Dialog,
  DialogContent,
  DialogActions
} from "@material-ui/core";
import React, { useState, useRef, useEffect } from "react";
import { Map, List } from "immutable";
import db from "./db.json";

export default function App() {
  const [showDialog, setShowDialog] = useState(false);
  const [inputType, setInputType] = useState("");
  const [inputQuantity, setInputQuantity] = useState("");
  const [itemList, setItemList] = useState([]);
  const [jsonData, setJsonData] = useState({});

  useEffect(() => {
    setJsonData(db);
    autoLoad();
    console.log("itemList:", itemList);
  }, []);

  function autoLoad() {
    db.area1.warehouse.forEach(
      (item) => {
        setInputType(...inputType, item.type);
        setInputQuantity(...inputQuantity, item.quantity);
      },
      setItemList([
        ...itemList,
        {
          itemType: "warehouse",
          itemId: Date.now()
        }
      ])
    );
  }

  function resetForm() {
    setInputType("");
    setInputQuantity("");
  }

  function addList(e) {
    e.preventDefault();
    setItemList([
      ...itemList,
      {
        itemType: "shop",
        itemId: Date.now(),
        inputType: inputType,
        inputQuantity: inputQuantity
      }
    ]);
    resetForm();
  }

  const renderItemList = itemList.length
    ? itemList.map((item) => {
        return (
          <>
            <div>
              <div style={{ height: "60px" }}>
                <TextField
                  value={item.inputType}
                  type="text"
                  style={{ marginBottom: "30px" }}
                />
              </div>
              <div style={{ height: "60px" }}>
                <TextField
                  value={item.inputQuantity}
                  type="text"
                  style={{ marginBottom: "30px" }}
                />
              </div>

              <div>{hideButton(item)}</div>
            </div>
          </>
        );
      })
    : "";

  function openDialog() {
    setShowDialog(!showDialog);
  }

  function onDismiss() {
    setShowDialog(false);
    setInputType("");
    setInputQuantity("");
  }

  const removeItemInList = (itemId) => {
    setItemList(
      itemList.filter((item) => {
        return item.itemId !== itemId;
      })
    );
  };

  function hideButton(item) {
    return (
      <Button
        onClick={() => removeItemInList(item.itemId)}
        style={{
          backgroundColor: "#2db7e2",
          fontSize: "14px",
          marginBottom: "30px"
        }}
      >
        {"Hide_Item"}
      </Button>
    );
  }

  function onSubmit() {}

  return (
    <>
      <Button onClick={openDialog} style={{ backgroundColor: "#4cb7f3" }}>
        {"Here"}
      </Button>
      <Dialog open={showDialog} onClose={onDismiss}>
        <div
          className="App"
          style={{ height: "500px", width: "500px", alignItems: "center" }}
        >
          {renderItemList}
          <div style={{ height: "100px" }}>
            <TextField
              type="text"
              // value={}
              placeholder="Please, Input the Type"
              onChange={(e) => setInputType(e.target.value)}
              style={{ marginTop: "30px", marginBottom: "30px" }}
            />
          </div>
          <div style={{ height: "60px" }}>
            <TextField
              type="text"
              // value={inputQuantity}
              placeholder="Please, Input theQuantity"
              onChange={(e) => setInputQuantity(e.target.value)}
              style={{ marginBottom: "30px" }}
            />
          </div>
          <div style={{ height: "40px" }}>
            <Button
              type="submit"
              onClick={addList}
              style={{ backgroundColor: "#fc7090", fontSize: "14px" }}
            >
              {"add"}
            </Button>
            <br />
            <br />
            <Button
              type="submit"
              onClick={onSubmit}
              style={{ backgroundColor: "#80cbc4", fontSize: "14px" }}
            >
              {"final_save"}
            </Button>
          </div>
        </div>
      </Dialog>
    </>
  );
}