How to use google map services with dynamically updated google api key? - reactjs

Question

I'm developing an admin panel for controlling some of the users with REACT. So in that, I'm using react-google-maps third-party module to enabling google map services with dynamically changing google API key by admin. Here, after changing API key by admin, google map API link not gets updated with new values still, it keeps the old values until I reload the page.
import {
withScriptjs,
withGoogleMap,
GoogleMap,
LoadScript,
withProps,
Circle,
Marker
} from "react-google-maps";
import Geocode from "react-geocode";
var locationUpdate = document.getElementsByClassName('location');
const CustomSkinMap = withScriptjs(withGoogleMap(props => (
<GoogleMap
ref={props.onMapLoad}
center={{ lat: props.center.lat, lng: props.center.lng }}
defaultZoom={13}
defaultCenter={{ lat:props.lat, lng: props.lng }}
onDragEnd={props.onDragEnd}
onBoundsChanged={props.onBoundsChanged}
defaultOptions={{
scrollwheel: true,
disableDefaultUI: true,
defaultVisible: true,
zoomControl: true
}
}
/>
)
)
);
class LocationDetails extends React.Component {
constructor(props) {
super(props);
...
render() {
const { classes } = this.props;
const { lat, lng, bounds, center } = this.state;
var url = `https://maps.googleapis.com/maps/api/js?key=${this.state.googleApi}&libraries=places`
const google = window.google;
console.log(google, this.props);
console.log('render', this.state.googleApi);
return (
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<Card>
<FormHelperText error={!!this.state.errors}>
{this.state.errors + (this.state.errors ? ' *' : '')}
</FormHelperText>
<CardBody>
<CustomSkinMap
onBoundsChanged={this.onBoundsChanged}
onMapLoad={this.handleMapLoad}
onDragEnd={this.handleMapDrag}
onSearchBoxMounted={this.handleSearchBoxMounted}
bounds={bounds}
onPlacesChanged={this.handlePlacesChanged}
onCenterChanged={this.onCenterChanged}
center={center}
lat={lat}
lng={lng}
googleMapURL={url}
loadingElement={<div style={{ height: `100%` }} />}
containerElement={
<div
style={{
height: `280px`,
borderRadius: "6px",
overflow: "hidden"
}}
/>
}
mapElement={<div style={{ height: `100%` }} />}
/>
<img
style={{
position: 'absolute',
top: '50%',
left: '50%'
}}
src={marker} alt="..." />
</CardBody>
</Card>
</GridItem>
</GridContainer>
);
}
}
Here customSkinmap with props passed to GoogleMap from react-google-maps