Map is not re centering on marker position in react google maps - react-google-maps

Question

react-google-maps is working fine,i use props to recenter the center position,but it seems map is not centering.Whats wrong in my code?
I have a map container and google map is a function base component.
import React, {useEffect, useState} from "react";
import {GoogleMap, InfoWindow, Marker, withGoogleMap, withScriptjs} from "react-google-maps";
import mapStyles from "./mapStyles";
import MapIcon from "../views/mapicon.png";
import MapMarked from "../views/mapMarked.png";
function Map(data) {
const cameras = data.data;
const [selectedPark, setSelectedPark] = useState(null);
const [cameraName,setCameraName]=useState(null);
const [center,setCenter]=useState(null);
const [zoom,setZoom]=useState(null)
useEffect(() => {
setCenter({lat: 23.8103, lng: 90.4125});
setZoom(11)
const listener = e => {
if (e.key === "Escape") {
setSelectedPark(null);
setZoom(11);
setCenter({lat: 23.8103, lng: 90.4125});
}
};
window.addEventListener("keydown", listener);
return () => {
window.removeEventListener("keydown", listener);
};
}, []);
const changeMap =(marker)=>{
const a= marker.lat, b=marker.lon;
const g= '{';
const v=':';
const centers=g.concat('lat',v,a,',','lng',v,b,'}');
setSelectedPark(marker);
setCameraName(marker.name);
setCenter(centers)
setZoom(15)
}
return (
<GoogleMap
zoom={zoom}
center={center}
defaultOptions={{ styles: mapStyles,
// gestureHandling:'greedy',
zoomControlOptions: { position: 14 },
}}
>
{cameras.map(marker=> (
<Marker
key={marker.id}
position={{
lat: marker.lat,
lng: marker.lon
}}
onClick={() => {
changeMap(marker);
}}
icon={{
url: cameraName !== marker.name ? MapIcon : MapMarked ,
scaledSize: new window.google.maps.Size(40, 40)
}}
/>
))}
{selectedPark && (
<InfoWindow
onCloseClick={() => {
setSelectedPark(null);
setCameraName(null);
setZoom(11);
setCenter({lat: 23.8103, lng: 90.4125});
}}
position={{
lat: selectedPark.lat,
lng: selectedPark.lon
}}
options={{
alignBottom: true,
pane: 'mapPane',
pixelOffset: new window.google.maps.Size(0, -50),
boxStyle: {
width: '80px'
},
closeBoxURL: ``,
enableEventPropagation: true
}}
>
<div>
<h3>{selectedPark.name}</h3>
<p>{selectedPark.address}</p>
</div>
</InfoWindow>
)}
</GoogleMap>
);
}
const MapWrapped = withScriptjs(withGoogleMap(Map));
class GoogleMapontainer extends React.Component {
render() {
if(this.props.data.length>0) {
return (
<div
style={{
position: "relative",
height: "calc(100vh - 175px)",
backgroundColor: "#F2F3F5"
}}
>
<MapWrapped
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=key`}
loadingElement={<div style={{height: `100%`}}/>}
containerElement={<div style={{height: `100%`}}/>}
mapElement={<div style={{height: `100%`}}/>}
data={this.props.data}
/>
</div>
);
}
else
return <div> Loading....</div>
}
}
export default GoogleMapontainer;