problem description

how to introduce external js files in react

the environmental background of the problems and what methods you have tried

let isLoaded = true

        return new Promise(function (resolve, reject) {
            if (isLoaded) {
              window.AMap.plugin(["AMap.MouseTool", "AMap.PolyEditor"], () => {
                resolve(window.AMap)
              })
              return
            }                
            var script = document.createElement("script")
            script.type = "text/javascript"
            script.async = true
            script.src = "http://webapi.amap.com/maps?v=1.4.3&key=key&callback=$$$maptcinit&plugin=AMap.MouseTool"
            // script.onload = resolve
            script.onerror = reject
            script.onload = function () {
              isLoaded = true
              resolve(window.AMap)
            }
            document.head.appendChild(script)
          })

related codes

/ / Please paste the code text below (do not replace the code with pictures)
export default class HistoryPath extends React.Component {

    constructor(){
        super();
        this.state={
            useType:"CONTAINER",
            visible: false,
            visibleOder:false,
        };
        
        this.loadUIs();
        this.amapEvents = {
            created: (mapInstance) => {
                   mapInstance.plugin("AMap.Geocoder", function() {
                        
                  })
              }
          };
          this.autoEvents = {
            created: (markerInstance) => {
                  mapInstance.plugin(["AMap.Autocomplete", "AMap.PlaceSearch"], function() {
                      var autoOptions = {
                          city: "", //
                          input: "tipinput" //inputid
                      };
                      autocomplete = new AMap.Autocomplete(autoOptions);
                      var placeSearch = new AMap.PlaceSearch({
                          city: "",
                      })
                      mapInstance.event.addListener(autocomplete, "select", function(e) {
                          //TODO poi
                          placeSearch.setCity(e.poi.adcode);
                          placeSearch.search(e.poi.name)
                          console.log(e.poi)                            
                      });
                  });
            }
         }
    }
       
    loadUIs() {
          window.AMapUI.loadUI(["overlay/SimpleMarker"], (SimpleMarker) => {
          this.initPage(SimpleMarker);
        })
      }
    initPage(SimpleMarker) {
        const map = this.props.__map__;
        new SimpleMarker({
            //
            iconLabel: "A",
            //
            iconTheme: "default",
            //
            iconStyle: "red",
            //...Marker...content
            map: map,
            position: [120, 31]
        });
        new SimpleMarker({
            //
            iconLabel: {
                innerHTML: "<i>B</i>", //
                style: {
                    color: "-sharpfff" //
                }
            },
            //
            iconTheme: "fresh",
            //
            iconStyle: "black",
            map: map,
            position: [120, 29]
        });
      }        

    show=(value)=>{        
        this.setState({
            useType:"CONTAINER0",
            visible:value?true:false,
            visibleOder:value?true:false,                
        })            
}
 
render(){
    let { useType } = this.state;
    const {listData}=this.props;
    const modalParams = {           
        width: 700,
        mask:false,
        style:{position:"absolute",right:40,top:160},
        visible: this.state.visible,
        footer: null,            
        destroyOnClose:true,
        keyboard:false,
        maskClosable:false,
        onCancel: () => this.setState({ visible: false }),
    };
    const plugins = [
        // "MapType",
        // "Scale",
        // "OverView",//
        // "ControlBar", // v1.1.0 
        {
          name: "ToolBar",
          options: {
            visible: false,  //  true
            onCreated(ins){
              // console.log(ins);
            },
          },
        }
      ]

    return(
        <div>
            <Map amapkey={"89319725fb20f0a726eec92bd584df03"}  events={this.amapEvents} center={this.state.center} useAMapUI>
                <ZoomCtrl events={this.autoEvents} onCreate={this.show}/>                                    
            </Map>
            <Row>
                <OpenModal {...modalParams} >
                    <ViewDetails useType={useType}></ViewDetails>
                      <ElectronicWaybillDetails useType={useType} detailsData={ listData }></ElectronicWaybillDetails>
                </OpenModal>                    
            </Row>
        </div>
    )
}

}

what result do you expect? What is the error message actually seen?

where is the right place for externally introduced js?