在react中点击切换绘图工具并打开一个新的div时我如何隐藏最后一个div

在改变/点击绘图工具时，我想让前一个div关闭，新的div打开，但目前，新的div打开时没有关闭前一个div。

我想要实现的功能可以在这里看到：https://geojson.io/#map=2/20.0/0.0

链接到我的应用程序：https://open-layers-attentive.netlify.app/

该组件的代码：

import React, { useContext, useState } from "react";
import { MapContext } from "../components/MapComponent";
import { GEOMETRY_TYPE } from "../Constants";

const DrawTool = ({ geomType, image }) => {
  const map = useContext(MapContext);

  const [cancelModal, setCancelModal] = useState("none");
  const [modalPosition, setModalPosition] = useState("15px");

  const handleClick = () => {
    if (geomType === GEOMETRY_TYPE.POLYGON) {
      setModalPosition("52px");
    } else if (geomType === GEOMETRY_TYPE.POINT) {
      setModalPosition("88px");
    }

    map.drawGeometry(geomType);
    setCancelModal("block");
  };

  const handleEdit = (editGeomType) => {
    map.editFeatures(editGeomType);
  };

  const handleCancel = (geomType) => {
    setCancelModal("none");
    map.cancelEdit(geomType);
  };

  return (
    <div>
      <img onClick={handleClick} className="draw-tool" src={image} alt="" />
      <div
        className="cancel-box"
        style={{ display: cancelModal, top: modalPosition }}
      >
        <span
          onClick={() => handleCancel(geomType)}
          className="cancel-box-div left"
        >
          Cancel
        </span>
        <span
          onClick={() => handleEdit(geomType)}
          className="cancel-box-div right"
        >
          Edit
        </span>
      </div>
    </div>
  );
};

export default DrawTool;