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..