Login to Google developer console, create app then get API keys. You need to enable maps service by providing Credit card before using it.

npm i google-map-react
// config.js
export const GOOGLE_MAPS_KEY = "xxx-xxx";
// components/cards/MapCard.js
import GoogleMapReact from "google-map-react";
import { GOOGLE_MAPS_KEY } from "../../config";

export default function MapCard({ ad }) {
  const defaultProps = {
    center: {
      //   lat: -33.865143,
      //   lng: 151.2099,
      lat: ad?.location?.coordinates[1],
      lng: ad?.location?.coordinates[0],
    },
    zoom: 11,
  };

  if (ad?.location?.coordinates?.length) {
    return (
      // Important! Always set the container height explicitly
      <div style={{ width: "100%", height: "350px" }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: GOOGLE_MAPS_KEY }}
          defaultCenter={defaultProps.center}
          defaultZoom={defaultProps.zoom}
        >
          <div
            lat={ad?.location?.coordinates[1]}
            lng={ad?.location?.coordinates[0]}
          >
            <span className="lead">📍</span>
          </div>
        </GoogleMapReact>
      </div>
    );
  }
}

Now import and use in AdView

// AdView.js
<div className="row mt-2">
  <div className="col-md-7">
    <MapCard ad={ad} />
  </div>

  <div className="col-md-5">Contact form</div>
</div>