Get center coordinates on map drag event

[Reshad-Hasan]

I am trying to replicate how uber set position works where I want to drag the map and the marker position will be fixed

and when drag ends I should be able to get the location

I am trying to update the marker position when map bounds change with handleBoundsChanged
(Initially map center and marker position is same)

but I can't get the map center after drag

I tried doing
const currentCenter = refMap.current.getInstance().getCenter();

but currentCenter always comes undefined

react-google-maps gives getCenter directly from instance but I can't find anything like that in @react-google-maps/api

here is my full component code

function DraggableMapInputModal() {
  const [mapCenter, setMapCenter] = useState(center);
  const refMap = useRef(null);
  const options = {
    mapTypeControl: false,
    scaleControl: true,
    streetViewControl: false,
    disableDefaultUI: true,
    styles: mapStyles,
  };

  const handleBoundsChanged = () => {
    const currentCenter = refMap.current.getInstance().getCenter();

    setMapCenter({ lat: currentCenter.lat(), lng: currentCenter.lng() });
  };

  return (
    <Modal open onClose={() => {}}>
      <ContentWrapper>
        <LoadScript googleMapsApiKey={process.env.GOOGLE_MAPS_API_KEY}>
          <GoogleMap
            ref={refMap}
            center={center}
            zoom={10}
            mapContainerStyle={containerStyle}
            options={options}
            onBoundsChanged={handleBoundsChanged}
          >
            <Marker position={mapCenter} />
          </GoogleMap>
        </LoadScript>
      </ContentWrapper>
    </Modal>
  );
}

how can I get the center position in onDrag or onBoundsChanged function?