Google-Map-React. How to add a map to my react project that has a dynamic center property

Question

Struggling hard with this issue... I need a map on my react app that can change its center dynamically based on data passed in.

Map loads with this current code. Tried to pass lat, lng props into default center but it is an immutable object. The dynamic lat and lng props do work for the markers. However, not for the default center. I tried to convert the lat and lng props into a number, also a float with parseFloat(), neither of those methods worked. I am very new to this. How can I revise my code to get a dynamic center for my map? This is necessary because each location will have its own page with its own map, and my project has nearly 30 locations. Thanks!

export default function Map({lat, lng}){

const defaultProps = { center: { lat: 34.93952867485694, lng: -82.03151629587364 }, zoom: 11, };

//**  lat and lng in this instance are made up numbers  **//

return (

<div style={{ height: '50vh', width: '100%' }}>
  <GoogleMapReact
    bootstrapURLKeys={{ key: ApiKey,
    language: 'en',
    libraries:['places', 'geometry', 'drawing', 'visualization'] }}
    defaultCenter={defaultProps.center}
    defaultZoom={defaultProps.zoom}
    yesIWantToUseGoogleMapApiInternals
    onGoogleApiLoaded={({ map, maps }) => handleApiLoaded(map, maps)}
    >

    <MapMarker lat={lat} lng={lng}/>    


    </GoogleMapReact>


</div>
); }