How to use the @mapbox/mapbox-gl-draw.modes function in @mapbox/mapbox-gl-draw

});
      map.addControl(scale);
      scale.setUnit("metric");
      // 全图
      map.addControl(new mapboxgl.FullscreenControl());
      // 定位
      map.addControl(
        new mapboxgl.GeolocateControl({
          positionOptions: {
            enableHighAccuracy: true
          },
          trackUserLocation: true
        })
      );
      //添加绘制功能
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle;

      var draw = new MapboxDraw({
        modes: modes
      });
      map.addControl(draw);

      map.on("draw.create", feature => {
        this.feature = feature;
      });
      //设置为全局变量
      this.draw = draw;
      this.map = map;
      //地图事件
      var that = this;
      this.map.on("moveend", async function() {

import MapboxDraw from '@mapbox/mapbox-gl-draw';

import { DRAW_CLICK_BUFFER } from 'draw/config';
import { NodeMangler } from 'draw/modes/mainMode';
/**
 * @TOFIX need to figure out for direct_Select
 *  need it to scale!
 */

MapboxDraw.modes.simple_select.clickAnywhere = function(state, e) {
  // Clear the re-render selection
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  // console.log('simple_select wasSelected=', wasSelected);
  // if (wasSelected.length > 0) {
  //   this.clearSelectedFeatures();
  //   this.deleteFeature(wasSelected);
  // }
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures,
    event: e
  });
  this.stopExtendedInteractions(state);
};

coordPath: e.featureTarget.properties.coord_path,
    startPos: e.lngLat
  });
  // this.updateUIClasses({ mouse: Constants.cursors.MOVE });
};

MapboxDraw.modes.direct_select.clickNoTarget = function() {
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures
  });
};

MapboxDraw.modes.direct_select.clickInactive = function() {
  const wasSelected = this.getSelectedIds();
  const wasSelectedFeatures = wasSelected.map(id => this.getFeature(id));
  this.changeMode('NodeMangler', {
    wasSelected,
    wasSelectedFeatures
  });
};

export function setupDraw() {
  return new MapboxDraw({
    displayControlsDefault: true,
    clickBuffer: DRAW_CLICK_BUFFER,
    doubleClickZoom: false,
    controls: {
      lineString: true,
      polygon: true,

export const PriorityAreasForm = () => {
	const { projectInfo, setProjectInfo } = useContext(StateContext);
	const [map, setMap] = useState(null);

	const mapRef = React.createRef();
	const modes = MapboxDraw.modes;
	modes.draw_rectangle = DrawRectangle;
	modes.draw_circle = CircleMode;

	const draw = useState(
		new MapboxDraw({
			displayControlsDefault: false,
			modes: modes,
			styles: [
				{
					id: 'gl-draw-polygon-fill-inactive',
					type: 'fill',
					paint: {
						'fill-color': '#00004d',
						'fill-opacity': 0.6,
					},
				},

export function setupDraw() {
  return new MapboxDraw({
    displayControlsDefault: true,
    clickBuffer: DRAW_CLICK_BUFFER,
    doubleClickZoom: false,
    controls: {
      lineString: true,
      polygon: true,
      trash: true
    },
    defaultMode: 'NodeMangler',
    modes: {
      ...MapboxDraw.modes,
      NodeMangler
    }
  });
}

const MapboxDraw = require('@mapbox/mapbox-gl-draw');
const Constants = require('@mapbox/mapbox-gl-draw/src/constants');
const doubleClickZoom = require('@mapbox/mapbox-gl-draw/src/lib/double_click_zoom');
const circle = require('@turf/circle').default;

const CircleMode = {...MapboxDraw.modes.draw_polygon};
const DEFAULT_RADIUS_IN_KM = 2;

CircleMode.onSetup = function(opts) {
  const polygon = this.newFeature({
    type: Constants.geojsonTypes.FEATURE,
    properties: {
      isCircle: true,
      center: []
    },
    geometry: {
      type: Constants.geojsonTypes.POLYGON,
      coordinates: [[]]
    }
  });

  this.addFeature(polygon);