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

});
        });
    }
  };

  const parsePopupContent = (popupContent, properties) => {
    return popupContent.replace(/{{([A-Za-z0-0_-]+?)}}/g, (match, property) => {
      return properties[property];
    });
  };

  let draw;
  // Unless drawing_enabled is explicitly set to false, we assume we should
  // instantiate the draw plugin.
  if (options.drawing_enabled !== false && !isTouchDevice) {
    draw = new MapboxDraw({
      displayControlsDefault: false,
      userProperties: true,
      // These data-driven styles are used for styling geometry created with the
      // draw plugin.
      // https://github.com/mapbox/mapbox-gl-draw/blob/master/docs/EXAMPLES.md
      styles: [
        // Polygon fill: selected.
        {
          id: "gl-draw-polygon-fill-active",
          type: "fill",
          filter: [
            "all",
            ["==", "$type", "Polygon"],
            ["!=", "mode", "static"],
            ["==", "active", "true"],
          ],

_createControl = () => {
    // $FlowFixMe
    const map = this._map;
    // $FlowFixMe
    this._draw = new MapboxDraw({
      keybindings: this.props.keybindings,
      touchEnabled: this.props.touchEnabled,
      boxSelect: this.props.boxSelect,
      clickBuffer: this.props.clickBuffer,
      touchBuffer: this.props.touchBuffer,
      controls: {
        point: this.props.pointControl,
        line_string: this.props.lineStringControl,
        polygon: this.props.polygonControl,
        trash: this.props.trashControl,
        combine_features: this.props.combineFeaturesControl,
        uncombine_features: this.props.uncombineFeaturesControl
      },
      displayControlsDefault: this.props.displayControlsDefault,
      styles: this.props.styles,
      modes: typeof this.props.modes === 'function'

const {
      modes,
      onDrawActionable,
      onDrawCombine,
      onDrawCreate,
      onDrawDelete,
      onDrawModeChange,
      onDrawRender,
      onDrawSelectionChange,
      onDrawUncombine,
      onDrawUpdate,
      position
    } = this.props;
    const { map } = this.context;

    this.draw = new MapboxDraw({
      ...this.props,
      modes: {
        ...MapboxDraw.modes,
        ...modes
      }
    });
    map.addControl(this.draw, position);

    // Hook draw events
    map.on('draw.actionable', onDrawActionable);
    map.on('draw.combine', onDrawCombine);
    map.on('draw.create', onDrawCreate);
    map.on('draw.delete', onDrawDelete);
    map.on('draw.modechange', onDrawModeChange);
    map.on('draw.render', onDrawRender);
    map.on('draw.selectionchange', onDrawSelectionChange);

componentDidMount() {
    this.map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/light-v9',
      center: [5, 34],
      zoom: 1.5
    });

    this.draw = new MapboxDraw();

    this.map.on('load', () => {
      this.map.addControl(this.draw);
      // Triggers a map redraw once the component has finished mounting to ensure the rendered map fills the entire container. See: https://www.mapbox.com/help/blank-tiles/#mapbox-gl-js
      this.map.resize();
    });
  }

load() {
    const options = {
      boxSelect: false,
      displayControlsDefault: false,
      controls: {
        point: true,
        line_string: true,
        trash: true
      }
    }

    if (this.props.customModes) {
      options.modes = {...MapboxDraw.modes, ...this.props.customModes};
    }

    this.draw = new MapboxDraw(options);
    this.map.addControl(this.draw);

    this.cutLineControl = new CutLineControl();
    this.map.addControl(this.cutLineControl);

    this.map.on('draw.selectionchange', this.bindedOnSelectionChange);
    this.map.on('draw.update', this.bindedOnUpdate);
    this.map.on('draw.create', this.bindedOnCreate);
    this.map.on('draw.delete', this.bindedOnDelete);
    this.map.on('draw.modechange', this.bindedOnModeChange);

    this.draw.add(this.props.features);
  }

importChangesetMap('getGL').then((getGL: any) => {
      if (getGL) {
        var mapboxgl = getGL();
        mapboxgl.accessToken = mapboxAccessToken;
        const map = new mapboxgl.Map({
          container: 'geometry-map',
          style: 'mapbox://styles/mapbox/light-v9'
        });
        this.map = map;
        this.draw = new MapboxDraw({
          displayControlsDefault: false,
          controls: {
            polygon: true
          }
        });
        map.addControl(this.draw);

        map.on('draw.create', this.drawingUpdate);
        map.on('draw.modechange', this.clearBeforeDraw);
        map.on('draw.delete', this.drawingUpdate);
        map.on('draw.update', this.drawingUpdate);
        map.on('style.load', () => {
          try {
            this.updateMap(
              this.props.value
                .get('0')