I'm rather new to React & I'm trying to make a map that allows you to drag an infinite number of markers from a sidebar onto the google map.

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

I can't get the marker to drag and when I try to replace the function in the onChild* methods with console.log("click"), it only logs when I zoom in on the map.

With this current code, none of the onChild* functions run at all. What am I doing wrong and what am I not understanding?