JSX element type 'GoogleMapReact' does not have any construct or call signatures.ts(2604)

Question

I get the error "JSX element type 'GoogleMapReact' does not have any construct or call signatures.ts(2604)" in my TypeScript code below. How do I fix this?

import React, { useState } from "react";
import GoogleMapReact from "google-maps-react";

const AnyReactComponent = ({ text }: any) => <div>{text}</div>;

const SimpleMap = (props: any) => {
  const [center, setCenter] = useState({ lat: 11.0168, lng: 76.9558 });
  const [zoom, setZoom] = useState(11);
  return (
    <div style={{ height: "100vh", width: "100%" }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: "XXXXXXXXXXXXXXXXXXXX" }}
        defaultCenter={center}
        defaultZoom={zoom}
      >
        <AnyReactComponent lat={11.0168} lng={76.9558} text="My Marker" />
      </GoogleMapReact>
    </div>
  );
};

export default SimpleMap;

Answer 1

You are importing google-maps-react library, but you are using the component as if it you were using google-map-react (map instead of maps).

Assuming you want to use google-map-react: remove the google-maps-react dependency, install google-map-react and change the import in your code.