React google maps: TS2769: No overload matches this call

Question

I am using reactjs with the typescript and trying to integrate the react google maps library.

Here is my map component file

import {
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";

interface MapProps {
  // Define any additional props for the Map component, if needed
}

const MapWithAMarker = withGoogleMap<MapProps>(() =>
  <GoogleMap  //here I am getting the error
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <Marker
      position={{ lat: -34.397, lng: 150.644 }}
    />
  </GoogleMap>
);

const maps = () => <MapWithAMarker
  containerElement={<div style={{ height: `800px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/> 
export default maps;

The Error message:

import GoogleMap
No overload matches this call.
  Overload 1 of 2, '(props: GoogleMapProps | Readonly<GoogleMapProps>): GoogleMap', gave the following error.
    Type '{ children: Element; defaultZoom: number; defaultCenter: { lat: number; lng: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>'.
  Overload 2 of 2, '(props: GoogleMapProps, context: any): GoogleMap', gave the following error.
    Type '{ children: Element; defaultZoom: number; defaultCenter: { lat: number; lng: number; }; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GoogleMap> & Readonly<GoogleMapProps>'.ts(2769)