I'm trying to use Google Maps Api in my app, everything is fine until I want to display a Marker at the first render of the map. The Marker is not showing up, but if I add one more Marker after the render is done, the Marker will appear.

So the problem is that I want to render the map with a Marker already there, I don't want to wait for some location to be selected.

I want to receive lat and lng from props, but for now I've made an hard coded const (center).

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

export default function GoogleMaps({ lat, lng }) {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  });

  const center = useMemo(() => ({ lat: 42.4332, lng: 20.4343 }), []);

  if (!isLoaded) {
    return <h2>Calculating Locations..</h2>;
  }

  return (
    isLoaded && (
      <GoogleMap
        center={center}
        zoom={17}
        mapContainerStyle={{ width: "450px", height: "400px" }}
        options={{ disableDefaultUI: true, mapId: "deleted for this snippet" }}
      >
        <Marker position={center} />
      </GoogleMap>
    )
  );
}