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

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);
    map.on('draw.uncombine', onDrawUncombine);
    map.on('draw.update', onDrawUpdate);
  }

onDrawCombine,
      onDrawCreate,
      onDrawDelete,
      onDrawModeChange,
      onDrawRender,
      onDrawSelectionChange,
      onDrawUncombine,
      onDrawUpdate,
      position
    } = this.props;

    // Define a new Draw Control
    this.draw = new MapboxDraw({
      ...this.props,
      modes: {
        ...MapboxDraw.modes,
        ...modes
      }
    });

    // Add it to our map
    map.addControl(this.draw!, position);

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

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