Soy bastante nuevo en React y estoy tratando de hacer un mapa que te permita arrastrar una cantidad infinita de marcadores desde una barra lateral al mapa de Google.

 import GoogleMapReact from 'google-map-react'; import { useState, useRef } from 'react'; import Marker from './Marker'; const apiIsLoaded = (map, maps) => { console.log(map, maps); }; const Map = ({center}) => { const [zoom, setZoom] = useState(11); const [draggable, setDraggable] = useState(true) const [lat, setLat] = useState(42) const [lng, setLng] = useState(-122) function handleChange({zoom}) { setZoom( zoom ) } function onMarkerInteraction(childKey, childProps, mouse) { console.log("down") setDraggable( false ) setLat( mouse.lat ) setLng( mouse.lng ) } function onMarkerInteractionUp({draggable}) { console.log("up") setDraggable(true ) } return ( <div className="map"> <GoogleMapReact draggable={ draggable } onChange={ handleChange } center={ center } zoom={ zoom } onChildMouseDown={ onMarkerInteraction } onChildMouseUp={ onMarkerInteractionUp } onChildMouseMove={ onMarkerInteraction } bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_KEY }} yesIWantToUseGoogleMapApiInternals onGoogleApiLoaded={({ map, maps }) => { apiIsLoaded(map, maps) }} > <Marker id={1} latitude={lat} longitude={lng} /> </GoogleMapReact> </div> ) } Map.defaultProps = { center: { lat: 42.3265, lng: -122.8756 } } export default Map

No puedo hacer que el marcador se arrastre y cuando trato de reemplazar la función en los métodos onChild* con console.log ("clic"), solo se registra cuando hago zoom en el mapa.

Con este código actual, ninguna de las funciones de onChild* se ejecuta en absoluto. ¿Qué estoy haciendo mal y qué no estoy entendiendo?