Базовая карта Arcgis, использующая реагирование js

Question

Я хочу сделать базовую карту arcgis с помощью

Это то, что я придумал до сих пор

Я использовал esri-loader для загрузки модулей и создал карту и просмотр экземпляров в хуке жизненного цикла componentDidMount(), как показано в приведенном ниже коде

BaseMap.js:

import React, { Component } from 'react';
import { loadModules } from 'esri-loader';

class BaseMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      mapContainerId: 'basemap',
      status: 'loading'
    }
  }
  componentDidMount() {
    loadModules(['esri/Map', 'esri/views/MapView'])
    .then(([Map, View]) => {
      const map = new Map(this.props.mapProperties);
      const viewProperties = {
        map,
        container: this.state.mapContainerId,
        ...this.props.viewProperties
      };
      const rView = new View(viewProperties);
      rView.then((view) => {
        this.setState({
          map,
          view,
          status: 'loaded'
        });
      })
      .catch((e) => {
        throw e;
      })
    })
    .catch((e) => {
      this.setState({ status: 'failed' });
      throw e;
    })
  }

  render() {
    return (
      <div id={this.state.mapContainerId} style={{ width: '100%', height: '100%' }}></div>
    );
  }
}

export default BaseMap;

Внутри App.js

import BaseMap from '../components/BaseMap';

export default class App extends Component {
  render() {
    return (
      <div>
        <BaseMap
          mapProperties={{
            basemap: 'streets-vector',
          }}
          viewProperties={{
            center: [17.3850, 78.4867],
            zoom: 6
          }}
        />        
      </div>
    )
  }
}

Но никакая карта не загружается на экран. И никаких ошибок в консоли тоже. Есть некоторые предупреждения об устаревании

[esri.core.Promise] DEPRECATED: then() -- use .when(callback, errback) instead

Что я делаю неправильно?

Я написал это, используя response-arcgis npm в качестве ссылки. Я пытался напрямую с помощью npm также

App.js

import React, { Component } from 'react';
import { Map } from 'react-arcgis';

export default class App extends Component {
  render() {
    return (
      <div>
        <Map />
      </div>
    );
  }
}

Это также не загружает карту. Просто пустое пространство. Нет ошибок и одинаковых предупреждений.