Google-Maps-React with TypeScript. Error with parameters

So I am using TypeScript for this file.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;

However, an error occurs for MapContainer at the last function:

Argument of type 'typeof MapContainer' is not assignable to parameter of type 'ComponentType<IProvidedProps>'.
  Type 'typeof MapContainer' is not assignable to type 'ComponentClass<IProvidedProps, any>'.
    Construct signature return types 'MapContainer' and 'Component<IProvidedProps, any, any>' are incompatible.
      The types of 'props' are incompatible between these types.
        Type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' is not assignable to type 'Readonly<IProvidedProps> & Readonly<{ children?: ReactNode; }>'.
Property 'google' is missing in type 'Readonly<(props: any, mapStyle: any) => any> & Readonly<{ children?: ReactNode; }>' but required in type 'Readonly<IProvidedProps>'.ts(2345)

It's a tad frustrating. I do not understand what they are looking for. I was able to get the map to work with JSX but not TSX. I try to assign props to MainContainer but it doesn't change anything..

I didn't change much honestly. I primarily added the <{google}> parameter that it had asked for, and it appears that it was seeking that prop it was missing. I am using Visual Studio Code which also processes errors slowly sometimes for me, which might add onto why there was an issue in the first place.

import React, {Component} from 'react'
import {Map, InfoWindow, Marker, GoogleApiWrapper, mapEventHandler, markerEventHandler} from 'google-maps-react';
import { coordinates } from '../customerPage'

const mapStyle = {
    width: '920px',
    height: '500px'
}

export class MapContainer extends Component<{google}>{
    onMapClicked: mapEventHandler;
    onMarkerClick: markerEventHandler;
    onInfoWindowClose: any;
    map?: google.maps.Map | google.maps.StreetViewPanorama

    render(){
        return(
            <>
                <Map google={google} 
                     zoom={16}
                     draggable
                     initialCenter={{
                        lat: coordinates.latitude,
                        lng: coordinates.longitude
                     }}
                     onReady={(mapProps, map) => {
                        this.setState({ map: map as google.maps.Map})
                    }}
                     style={mapStyle}
                     onClick={this.onMapClicked}>
                
                    <Marker onClick={this.onMarkerClick}
                            title={`Location of ...`} />
                </Map>
                <p className="float-left md:ml-0 mt-64 lg:ml-48 sm:pt-64 lg:pt-64">
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 rounded shadow">Alarm</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Unlock</button>
                    <button className="bg-white hover:bg-gray-200 text-gray-800 font-semibold py-3 px-5 border border-gray-400 xs:ml-20 sm:ml-20 md:ml-32 lg:ml-40 rounded shadow">Reset</button>
                </p>
            </>
        )
    }
}

const GoogleMap = GoogleApiWrapper({
    apiKey: 'xxx'
})(MapContainer)


export default GoogleMap;