问onclick后刷新react-google-maps地图

EN

import React, { useState, Component } from'react';
import { GoogleMap, withScriptjs, withGoogleMap, Marker, InfoWindow } from "react-google-maps";

    function Map(props) {
        const WrappedMap = withScriptjs(withGoogleMap(CreateMap))
        const [selectedPatio, setSelectedPatio] = useState(null)

        function CreateMap(){
            return (
                <GoogleMap
                    defaultZoom={13}
                    defaultCenter={{ lat: 49.278352, lng: -123.122538 }}
                >
                {props.patios.map((patio) => (
                    <Marker 
                        key={patio.name}
                        position={{
                            lat: patio.lat, 
                            lng: patio.lng}}
                        onClick={() => {
                            setSelectedPatio(patio);
                        }}
                    />
                ))}

                {selectedPatio && (
                    <InfoWindow
                    onCloseClick={() => {
                        setSelectedPatio(null);
                    }}
                    position={{
                        lat: selectedPatio.lat,
                        lng: selectedPatio.lng
                    }}
                    >
                    <div>
                        asd
                    </div>
                    </InfoWindow>
                )}
                </GoogleMap>)
        }

        return (
            <WrappedMap
            googleMapURL={'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=gemotry,drawing,places&key=XXX'}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `100%` }} />}
            mapElement={<div style={{ height: `100%` }} />}
    />
        );
    }

export default Map

//This is what my render looks like in app.js where i'm calling Map and sending an array of patios to props

render() {
    return (
        <BrowserRouter>      
        <NavBar data={{ icon:"location", text1:"Map", text2:"About"}}></NavBar>
        <div style={{  width: `100vw` , height: `75vh`, maxWidth: `100%` }}>
        <Map patios={this.state.patios}/>
        <div>
          <PatioMasonry patios={this.state.patios}/>
        </div>
        </div>
        <div>
          <BottomNavBar/>
        </div>
        <div>
            <Switch>
              <Route path="/" component={Homescreen} exact/>
           </Switch>
        </div> 
      </BrowserRouter>
    );
  }
}