How to use the esri-loader.loadModules function in esri-loader

public ngOnInit() {

    this.panRequestSubscription = this.mapService.panRequest.subscribe(() => {
      this.panMap(this.mapService.wonderCoordinates);
    });

    // use esri-loader to load JSAPI modules
    return loadModules([
      'esri/Map',
      'esri/views/MapView',
      'esri/Graphic'
    ])
      .then(([Map, MapView, Graphic]) => {
        const map: __esri.Map = new Map({
          basemap: 'hybrid'
        });

        this.mapView = new MapView({
          container: this.viewNode.nativeElement,
          center: [-12.287, -37.114],
          zoom: 12,
          map: map
        });
      })

function addWidget (view, widget) {
    switch (widget.parent) {
    case 'expand': 
        // expand type widget. places a widget inside a expand wrapper that is toggle able and mobile friendly
        // https://developers.arcgis.com/javascript/latest/sample-code/widgets-expand/index.html
        //!steal-remove-start
        if (widget.iconClass) {
            //eslint-disable-next-line
            console.warn('widget.iconClass is deprecated: use widget.parentOptions.expandIconClass instead')
        }
        //!steal-remove-end
        loadModules(['esri/widgets/Expand']).then(([Expand]) => {
            const expand = new Expand(Object.assign({

                // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
                expandIconClass: widget.iconClass || DEFAULT_ICON,
                view: view,
                content: widget.component
            }, widget.parentOptions || {}));
                    
            view.ui.add({
                component: expand,
                position: widget.position || DEFAULT_POSITION,
                index: widget.index
            });
        });
        break;

public ngOnInit() {

    return loadModules([
      'esri/Map',
      'esri/views/MapView'
    ]).then(([Map, MapView]) => {

      const map: __esri.Map = new Map({
        basemap: 'hybrid'
      });

      this.mapView = new MapView({
        container: this.mapViewEl.nativeElement,
        center: [-12.287, -37.114],
        zoom: 12,
        map: map
      });
    })
    .catch(err => {

async initLocateWidget() {
        const { mapView } = this.state;

        type Modules = [typeof ILocate];

        try {
            const [Locate] = await (loadModules([
                'esri/widgets/Locate',
            ]) as Promise);

            const locateWidget = new Locate({
                view: mapView,
            });

            mapView.ui.add(locateWidget, {
                position: 'top-left',
                index: 2,
            });
        } catch (err) {
            console.error(err);
        }
    }

export async function createBasemapsGallery(
    galleryProperties: __esri.BasemapGalleryProperties,
    expandPropertis: __esri.ExpandProperties
): Promise<__esri.Expand> {
    const [Expand, BasemapGallery] = await loadModules([
        'esri/widgets/Expand',
        'esri/widgets/BasemapGallery'
    ]);
    galleryProperties.container = document.createElement('div');
    const gallery = new BasemapGallery(galleryProperties);
    expandPropertis.content = gallery.domNode;
    const expand = new Expand(expandPropertis);
    return expand;
}

return this.props.onFindAddressError(response);
    }

    result = result.result;

    const point = {
      type: 'point',
      x: result.location.x,
      y: result.location.y,
      spatialReference: {
        wkid: this.props.wkid
      }
    };

    const [Graphic] = await loadModules(['esri/Graphic']);

    const graphic = new Graphic({
      geometry: point,
      symbol: this.props.pointSymbol
    });

    return graphic;
  };

async initMap() {
        loadCss();

        const { defaultExtent } = this.props;

        try {
            const container = this.mapDivRef.current;

            type Modules = [
                typeof IMapView,
                typeof IMap,
                typeof IVectorTileLayer
            ];

            const [MapView, Map, VectorTileLayer] = await (loadModules([
                'esri/views/MapView',
                'esri/Map',
                'esri/layers/VectorTileLayer',
            ]) as Promise);

            const waybackLayer = await this.getWaybackLayer();

            const referenceLayer = new VectorTileLayer({
                id: this.ReferenceLayerId,
                portalItem: {
                    id: config['Hybrid-Reference-Layer'],
                },
            });

            const map = new Map({
                layers: [waybackLayer, referenceLayer],

async handleStateChange(feature) {
    const { provider, symbols, onSherlockMatch } = this.props;

    const searchValue = feature.attributes[provider.searchField];

    let contextValue;
    if (provider.contextField) {
      contextValue = feature.attributes[provider.contextField];
    }

    const response = await provider.getFeature(searchValue, contextValue);

    const [Graphic] = await loadModules(['esri/Graphic']);

    const results = response.data;

    const graphics = results.map(feature =>
      (new Graphic({
        geometry: feature.geometry,
        attributes: feature.attributes,
        symbol: symbols[feature.geometry.type]
      }))
    );

    onSherlockMatch(graphics);
  };

export async function createField(
    fieldProperties?: __esri.FieldProperties
): Promise<__esri.Field> {
    const [Field] = await loadModules([
        'esri/layers/support/Field'
    ]);
    return new Field(fieldProperties);
}

export async function parseWebSceneFromJSON(
    json: any
): Promise<__esri.WebScene> {
    const [WebScene] = await loadModules([
        'esri/WebScene'
    ]);
    const scene: __esri.WebScene = WebScene.fromJSON(json);
    return scene;
}