Estoy usando un componente funcional y tengo un componente GoogleMapReact en mi sitio web de reacción y quiero mostrar la ubicación del mapa para una propiedad específica. Obtengo mis datos de firebase firestore y establezco los valores de lat y lang de la base de datos.

pero el mapa nunca se carga y recibo esta advertencia en la consola "defaultCenter prop changed. You can't change default props."

¿Qué estoy haciendo mal? Seguí las instrucciones del paquete pero aún así no funciona.

Aquí está mi código:

importar GoogleMapReact desde '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> )