Map is not re centering on marker position in 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;