I am using a functional component and I have a GoogleMapReact component in my react website and I want to display the map location for a specific property. I am fetching my data from firebase firestore and setting the values of lat and lang from the database.

but the map never loads and i get this warning in the console "defaultCenter prop changed. You can't change default props."

What am I doing wrong? I followed the package instructions but still it doesn't work.

Here is my code:

import GoogleMapReact from 'google-map-react';

    const [getlat,setlat] = useState("");
    const [getlang,setlang] = useState("");

 //how i am setting my   lat and lang

   const getPropertyDetails = async () => {

      await firebase.firestore().collection("Properties").where("propertyID","==",propID).get().then((snapshot) => {
 
         snapshot.forEach((doc) => {
        
           const {lat,lang} = doc.data();
          
           list.push({
            
             lat:lat,
             lang:lang,
            
           });
          
           
           setlat(lat)
           setlang(lang)
         })

 


   })
 }
 const defaultProps = {
        center: {
          lat: getlat,
          lng: getlang
        },
        zoom: 15
        };
        const Marker = ({ text }) => <div>{text}</div>;
    
        const renderMarkers = (map, maps) => {

        let marker = new maps.Marker({
        position: { lat: getlat, lng: getlang },
        map,
        title:"hello"
        });
        return marker;
        
      };

return (

           <div className="contact-page-map" style={{height:512,width:512}}>
             <GoogleMapReact  bootstrapURLKeys={{ key: "MY API KEY HERE" }} 
              defaultCenter={defaultProps.center} 
              defaultZoom={defaultProps.zoom} 
              yesIWantToUseGoogleMapApiInternals 
              onGoogleApiLoaded={({ map, maps }) => renderMarkers(map, maps)}>


                  <Marker
                    lat={getlat}
                    lng={getlang}
                    text={item.propname}
                    
                  />
                      </GoogleMapReact>
                  </div>
)