如何使用react js在esri arcgis地图中绘制标记点

<script src="https://js.arcgis.com/4.19/"></script>

import React, { Component } from 'react';

class Map extends Component {
  componentDidMount() {
    // 初始化地图
    const map = new window.esri.Map({
      basemap: 'streets'
    });

    // 将地图加载到指定的HTML元素中
    const view = new window.esri.views.MapView({
      container: 'map',
      map: map,
      center: [0, 0],
      zoom: 2
    });

    // 绘制标记点
    const point = new window.esri.geometry.Point({
      longitude: -118.80543,
      latitude: 34.02700
    });

    const markerSymbol = new window.esri.symbols.SimpleMarkerSymbol({
      color: [226, 119, 40],
      outline: {
        color: [255, 255, 255],
        width: 1
      }
    });

    const marker = new window.esri.Graphic({
      geometry: point,
      symbol: markerSymbol
    });

    const graphicsLayer = new window.esri.layers.GraphicsLayer();
    graphicsLayer.add(marker);

    map.add(graphicsLayer);
  }

  render() {
    return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
  }
}

export default Map;

import React from 'react';
import Map from './Map';

function App() {
  return (
    <div>
      <h1>使用React绘制ESRI ArcGIS地图</h1>
      <Map />
    </div>
  );
}

export default App;