I am trying to shift control of react mapbox builtin button controls over my own button

[HamzaIrfan008]

import React, { useState, useRef, useEffect } from "react";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Button,
} from "@mui/material";
import { ExpandMore } from "@mui/icons-material";
import AddIcon from "assets/svg/AddIcon.svg";
import { NormalInput } from "component/common";
import { NormalButton } from "component/common/NormalButton";
import { getZonesListApi } from "action/Programs/zonesAct";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import ReactMapboxGl, { Layer, Feature } from "react-mapbox-gl";
import DrawControl from "react-mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
import "../style.scss";
import { Header } from "component/common/ProgramsHeader";
import "mapbox-gl/dist/mapbox-gl.css";
import { ColorPicker } from "react-color-palette";
import CustomModal from "component/common/Modal";

const ZonesFCMain = (props) => {
const Map = ReactMapboxGl({
accessToken:
"pk.eyJ1IjoiZGFpbWsiLCJhIjoiY2ttbmt2dzc2MXZ1bjJwcGZsZndoaGdkbiJ9.KzEXKpaGb0yYkV8Npdg65g",
});
const mapRef = useRef(null);
const drawControlRef = useRef(null);

const [openZoneModal, setOpenZoneModal] = useState(false);
const [color, setColor] = useState("#121212");
const [totalValue, setTotalValue] = useState([]);
const [modalValue, setModalValue] = useState({
zoneName: "",
description: "",
});

useEffect(() => {
props.getZonesListApi().then((res) => {
console.log("####", res);
});
}, []);

const handleInput = (e) => {
let { value, name } = e.target;
setModalValue({ ...modalValue, [name]: value });
};

const handleAddZone = () => {
setTotalValue([...totalValue, { ...modalValue, color: color }]);
setModalValue({ zoneName: "", description: "" });
setOpenZoneModal(false);
};

const handleCancel = () => {
setOpenZoneModal(!openZoneModal);
};

const handleDelete = (item) => {
let findItem = totalValue.filter((e) => e.zoneName !== item.zoneName);
setTotalValue(findItem);
};

const onDrawCreate = ({ features }) => {
console.log("features", features);
// Handle the created polygon features
};

const onDrawUpdate = ({ features }) => {
console.log("features 2", features);
// Handle the updated polygon features
};

const handleMapLoad = (map) => {
mapRef.current = map;
drawControlRef.current = mapRef.current.drawControl;

console.log("map", map);

const polygon = {
  type: "Feature",
  geometry: {
    type: "Polygon",
    coordinates: [
      [
        [-74.007, 40.706],
        [-74.007, 40.712],
        [-73.997, 40.712],
        [-73.997, 40.706],
        [-74.007, 40.706],
      ],
    ],
  },
  properties: {},
};

map.addSource("polygon", {
  type: "geojson",
  data: polygon,
});

map.addLayer({
  id: "polygon",
  type: "fill",
  source: "polygon",
  paint: {
    "fill-color": "#39e64d",
    "fill-opacity": 0.5,
  },
});

};

const handleAddPolygon = () => {
if (drawControlRef.current) {
const drawControl = drawControlRef.current;
drawControl.changeMode("draw_polygon");
drawControl.onCreate({
features: [],
});
}
};

return (

<CustomModal
isOpen={openZoneModal}
size="md"
title="ADD ZONE"
onClose={() => {
setOpenZoneModal(false);
setModalValue({ name: "", description: "" });
}}
>

Choosen Color

{color.hex}

      <div className="d-flex justify-content-end my-3">
        <NormalButton
          label="CANCEL"
          outlineBtn
          isPrimary
          onClick={handleCancel}
          customClass="mx-3 btn-style px-0"
        />
        <NormalButton onClick={handleAddZone} label="SAVE" normal />
      </div>
    </CustomModal>

    <div className="row">
      <div className="col-8">
        <div>
          <div>
            <Map
              style="mapbox://styles/mapbox/streets-v11"
              containerStyle={{
                height: "400px",
                width: "100%",
              }}
              center={[-74.006, 40.7128]}
              onStyleLoad={handleMapLoad}
            >
              <DrawControl
                position="top-left"
                onDrawCreate={onDrawCreate}
                onDrawUpdate={onDrawUpdate}
                displayControlsDefault={false}
                default_mode="draw_polygon"
                controls={{
                  polygon: true,
                  trash: true,
                }}
              />
            </Map>
          </div>
        </div>
      </div>

      <div className="col-4">
        <div>
          {totalValue.map((data) => (
            <Accordion className="mt-2" key={data.zoneName}>
              <AccordionSummary
                expandIcon={<ExpandMore />}
                aria-controls="panel1a-content"
                id="panel1a-header"
              >
                {data.zoneName}
              </AccordionSummary>
              <AccordionDetails>
                <p>Description</p>
                <p>{data.description}</p>
                <hr />
                <div>
                  <Button onClick={handleAddPolygon}>
                    <img src={AddIcon} alt="Add Icon" />
                    Add new Poly
                  </Button>
                  <Button>Edit Existing poly</Button>
                </div>
              </AccordionDetails>
            </Accordion>
          ))}
        </div>
      </div>
    </div>
  </div>
</div>

);
};

const mapDispatchToProps = (dispatch) => {
return bindActionCreators(
{
getZonesListApi,
},
dispatch
);
};

const Zones = connect(null, mapDispatchToProps)(ZonesFCMain);
export default Zones;

How can I create custom controls ?