Estoy creando una aplicación de reacción donde un usuario puede agregar marcadores a un mapa de GoogleMaps haciendo clic en él. El problema es que, cuando hago clic en el mapa, el punto se agrega a la matriz, pero el marcador no se representa. Por alguna razón, la función dentro del mapa solo se llama una vez, cuando el mapa se muestra por primera vez.

 import { useAuth } from "../contexts/AuthContext"; import Navbar from "./Navbar"; import { useJsApiLoader, GoogleMap, Marker } from '@react-google-maps/api' import { Box } from '@chakra-ui/react'; import { useState } from 'react'; import LoadingCircle from "./LoadingCircle"; export default function MapPage() { const center = { lat: 50.45, lng: 30.52 }; const { loading, currentUser } = useAuth(); const { isLoaded } = useJsApiLoader({ googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY, libraries: ['places'] }); const [map, setMap] = useState(null); const [points, setPoints] = useState([center]); console.log(process.env.REACT_APP_GOOGLE_MAPS_API_KEY) if (!isLoaded) { return ( <div> <Navbar></Navbar> <LoadingCircle /> </div> ); } return ( <div> <Navbar></Navbar> <div className=""> <Box position={'relative'} top={0} left={0} h="93.5vh" w="100%" className="h-full w-full"> <GoogleMap center={center} zoom={15} mapContainerStyle={{ width: '100%', height: '100%' }} options={{ zoomControl: false, streetViewControl: false, mapTypeControl: false, fullscreenControl: false, }} onLoad={(map) => setMap(map)} onClick={e => { let lat = e.latLng.lat(); let lng = e.latLng.lng(); let new_point = { lat: lat, lng: lng }; let new_points = points; new_points.push(new_point); setPoints(new_points); setMap(map); console.log(points); }}> { points.map((point, index) => { console.log(point); console.log(index); return <Marker position={point}/> }) } </GoogleMap> </Box> </div> </div> );

}