import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";

const BasicMap = () => {
  const BasicContainerStyle = {
    height: "500px",
  };

  const BasicCenter = {
    lat: -3.745,
    lng: -38.523,
  };

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: "https://maps.googleapis.com/maps/api/js?key=AIzaSyBkNaAGLEVq0YLQMi-PYEMabFeREadYe1Q&v=3.exp&libraries=geometry,drawing,places",
  });
  
  return (
    <Card>
      <CardBody>
        <div className="map-js-height">
          <div id="gmap-simple" className="map-block">
            {isLoaded ? <GoogleMap mapContainerStyle={BasicContainerStyle} center={BasicCenter} zoom={10} /> : "Loading"}
          </div>
        </div>
      </CardBody>
    </Card>
  );
};

Remove package from project

npm uninstall @react-google-maps/api

import { MapContainer, TileLayer } from "react-leaflet";

const WorldMap = () => {
  const USA_POSITION = { lat: 50, lng: 10 };

  return (
    <Card>
      <CardBody>
        <MapContainer style={{ height: 389 }} easeLinearity={0.35} attributionControl={true} center={USA_POSITION} zoom={13} scrollWheelZoom={true} className="z-0 jvector-map-height">
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </MapContainer>
      </CardBody>
    </Card>
  );
};

Remove package from project

npm uninstall react-leaflet