реакции-гугл-автозаполнение: гугл не определен

Question

снимок экрана с ошибкой

ниже приведен снимок кода:

 render() {
        const AsyncMap = withScriptjs(withGoogleMap(props => (
            <GoogleMap defaultZoom={15} defaultCenter={{lat: this.state.mapPosition.lat, lng: this.state.mapPosition.lng}}>
                <Marker draggable={false} position={{lat: this.state.markerPosition.lat, lng: this.state.markerPosition.lng}}/>
            </GoogleMap>)
        ));
        const asyncGoogleMapsUrl = `"https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAP_API_KEY}&libraries=places"`;
        const googlePlacesScriptUrl = `"https://maps.googleapis.com/maps/api/js?key=${GOOGLE_PLACES_API_KEY}&libraries=places"`;
        return (
            <PageComponent showLoader={this.state.showLoader}>
                <div className="row">
                    <div className="col-sm-12 col-md-12 col-xl-12">
                        <div className="card mb-3">
                            <div className="card-header-tab card-header">
                                <div className="card-header-title font-size-lg text-capitalize font-weight-normal">
                                    <i className="header-icon fas fa-map-pin icon-gradient bg-happy-itmeo mr-3 text-muted opacity-6"/>
                                    Add Area / Location
                                </div>
                            </div>
                            <div className="card-body">
                                <div style={{"width": "100%"}} id="example" className="table table-hover table-striped table-bordered">
                                    <div className="row">
                                        <script type="text/javascript" src={googlePlacesScriptUrl}/>
                                        <div className="col-4">
                                            <Autocomplete className="form-control mt-3" onPlaceSelected={this.onPlaceSelected} types={["geocode"]}/>
                                            <input name="streetAddress" value={this.state.location} placeholder="Street Address" className="form-control mt-3" disabled/>
                                            <input name="city" value={this.state.city} placeholder="City" className="form-control mt-3" disabled/>
                                            <input name="province" value={this.state.province} placeholder="Province" className="form-control mt-3" disabled/>
                                            <input name="country" value={this.state.country} placeholder="Country" className="form-control mt-3" disabled/>
                                            <input name="zipCode" value={this.state.zipCode} placeholder="Zipcode" className="form-control mt-3" disabled/>
                                            <input name="langitude" value={this.state.lng} placeholder="Langitude" className="form-control mt-3" disabled/>
                                            <input name="longitude" value={this.state.lat} placeholder="Longitude" className="form-control mt-3" disabled/>
                                            <div className="row">
                                                <div className="col-6">
                                                    <input type="number" name="startHour" id="startHour" value={this.state.startHour} placeholder="Start Hour"
                                                           className="form-control mt-3"
                                                           onChange={this.handleChange.bind(this)}
                                                           min={0} max={23}/>
                                                </div>
                                                <div className="col-6">
                                                    <input type="number" name="endHour" id="endHour" value={this.state.endHour} placeholder="End Hour" className="form-control mt-3"
                                                           onChange={this.handleChange.bind(this)} min={0} max={23}/>
                                                </div>
                                            </div>
                                            <button className="btn btn-primary mt-3" onClick={this.onSaveButtonClick.bind(this)}>Save Location</button>
                                        </div>
                                        <div className="col-8">
                                            <AsyncMap googleMapURL={asyncGoogleMapsUrl} loadingElement={<div style={{height: `100%`}}/>}
                                                      containerElement={<div style={{height: "500px"}}/>}
                                                      mapElement={<div style={{height: `100%`}}/>}/>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </PageComponent>

Я использую google-auto-complete для выбора различных местоположений и на основании этого обновления расположение на карте, оба они находятся в одном файле js.

сценарии находятся в индексе. js, в целом работает нормально, но когда я ссылаюсь sh на страницу, она показывает выше ошибка, я вообще не эксперт, дайте мне знать, что я делаю не так?

Заранее спасибо!