onLoad prop return type error, but the map loads correctly

[darlanZero]

on the code of a map:

`const mapRef = useRef<GoogleMap | null>(null)

const center = useMemo<LatLngLiteral>(() => ({ lat: -19.947128, lng: -45.165717 }), [])

const options = useMemo<MapOptions>(() => ({ mapId: 'd78eeda2034f463a', clickableIcons: false, }), [])

const onLoad = useCallback((map: GoogleMap) =>{ mapRef.current = map}, [])

return <div className="flex h-full"> <div className="w-1/4 p-4 bg-black text-cyan-50 rounded-lg gap-4">

Commute?

<Places setOffice={(position) => { setOffice(position) mapRef.current?.panTo(position) }} />

  <div className=" p-10 gap-10 bg-white rounded-lg ">
    <RadioGroup
      isRequired
      label='Sistema'
      {...register('selectedSistema')}
    >
      <Radio value="agua">Água</Radio>
      <Radio value="esgoto">Esgoto</Radio>
      <Radio value="outro">Outro</Radio>
    </RadioGroup>

    <RadioGroup
      isRequired
      label="Tipo de Ativo"
      {...register('selectedTipoAtivo')}
    >
      <Radio value="visivel">Visível</Radio>
      <Radio value="enterrado">Enterrado</Radio>
    </RadioGroup>

    <RadioGroup
      isRequired
      label="Localidade"
      {...register('selectedLocalidade')}
    >
      <Radio value="localidade1">Localidade 1</Radio>
      <Radio value="localidade2">Localidade 2</Radio>
      <Radio value="localidade3">Localidade 3</Radio>
    </RadioGroup>
  </div>
</div>

<div className="w-4/5 h-full">
  <GoogleMap
    zoom={15}
    center={center}
    mapContainerClassName="map-container"
    options={options}
    onLoad={onLoad}
    onClick={handleMapClick}
  >
    {office && (
      <>
        <Marker 
          position={office} 
          icon={defaultMarker} 
          title="location"
        />
      </>
    )}
      
     {markers.map((marker) => (
       <Marker 
          key={marker.id}
          position={marker.position}
          onClick={() => handleMarkerClick(marker)}
          icon={ativo}
       />
     ))}

     {selectedMarker && (
       <InfoWindow
        key={selectedMarker.id}
        position={selectedMarker.position}
        onCloseClick={handleMarkerClose}
       >
          <div>
            <h2>Editar nome de Ativo</h2>
             <Input 
                placeholder="Nome do ativo"
                value={inputValue}
                onChange={handleInputChange}
                type="text"
             />
          </div>
       </InfoWindow>
     )}
  </GoogleMap>
</div>

; }`

the onLoad keeps getting this error: No overload matches this call. Overload 1 of 2, '(props: GoogleMapProps | Readonly<GoogleMapProps>): GoogleMap', generated the following error. Type '(map: GoogleMap) => void' cannot be assigned to type '(map: Map) => void | Promise'. Types of parameters 'map' and 'map' are incompatible. Type 'Map' has no properties in common with type 'GoogleMap': state, registeredEvents, mapRef, getInstance, and 11 more. Overload 2 of 2, '(props: GoogleMapProps, context: any): GoogleMap', generated the following error. Type '(map: GoogleMap) => void' cannot be assigned to type '(map: Map) => void | Promise'.ts(2769) index.d.ts(78, 5): The expected type comes from property 'onLoad', which is declared here in type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>' index.d.ts(78, 5): The expected type comes from property 'onLoad', which is declared here in type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>'

I'm using the latest version of react-google-maps/api. My only choice is getting to the map a any, but it doesn't will deploy correctly with this error.