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

// 全图
      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() {
        that.addBUIA();
      });
      this.addBUIA();

initMap: function (el) {
    if (el && !this.map && App.glSupport) {
      mapboxgl.accessToken = 'pk.eyJ1IjoibWFwZWd5cHQiLCJhIjoiY2l6ZTk5YTNxMjV3czMzdGU5ZXNhNzdraSJ9.HPI_4OulrnpD8qI57P12tg';
      this.map = App.map = new mapboxgl.Map({
        center: [105.66, 20],
        container: el,
        style: 'mapbox://styles/mapbox/satellite-v9',
        zoom: initialZoom
      });
      const nav = new mapboxgl.NavigationControl();
      this.map.addControl(nav, 'bottom-right');
      const draw = new MapboxDraw({
        styles: drawStyles,
        displayControlsDefault: false,
        userProperties: true
      });
      this.map.addControl(draw);
      this.draw = draw;
      // TODO: review whether the create and delete listeners fire anywhere now
      // that we're calling some events programatically
      this.map.on('draw.create', (e) => this.handleCreate(e.features));
      this.map.on('draw.delete', (e) => this.handleDelete(e.features));
      this.map.on('draw.update', (e) => {
        this.handleUpdate(e.features);
        e.features.forEach(this.markAsEdited);
      });
      this.map.on('draw.selectionchange', (e) => {
        // internal state used to track "previous state" of edited geometry

componentDidMount() {
    const {bounds} = this.props

    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json',
      center: [1.7191, 46.7111],
      zoom: 5
    })

    this.draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        point: true,
        trash: true
      },
      styles: numeroPointStyles
    })

    this.map.on('load', this.onLoad)
    this.map.addControl(this.draw)

    this.map.on('draw.create', this.createPosition)
    this.map.on('draw.update', this.createPosition)
    this.map.on('draw.delete', () => this.props.handlePosition(null))

    if (bounds) {

componentDidMount() {
    const {map, bounds, positions} = this.props

    map.setZoom(5)

    this.draw = new MapboxDraw({
      displayControlsDefault: false,
      userProperties: true,
      controls: {
        point: true,
        trash: true
      },
      styles: numeroIconStyles
    })

    map.on('load', this.onLoad)
    map.addControl(this.draw)

    map.on('styledata', this.styleData)

    map.on('draw.create', this.create)
    map.on('draw.update', this.update)

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
    }
  });
}

componentDidMount() {
    const {map} = this.props

    map.setZoom(5)

    this.draw = new MapboxDraw({
      displayControlsDefault: false,
      controls: {
        point: true,
        trash: true
      },
      styles: numeroPointStyles
    })

    map.on('load', this.onLoad)
    map.addControl(this.draw)

    map.on('styledata', this.onStyleData)

    map.on('draw.create', this.createPosition)
    map.on('draw.update', this.createPosition)
    map.on('draw.delete', () => this.props.handlePosition(null))

componentDidMount() {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json'
    })

    this.draw = new MapboxDraw({
      displayControlsDefault: false,
      styles: numeroPointStyles
    })

    this.map.on('load', this.onLoad)
    this.map.addControl(this.draw)

    this.map.on('draw.update', this.move)
  }