Google maps error - TypeError: "a is undefined" and Map.js:22 TypeError: Cannot read property 'firstChild' of undefined

I have searched this problem all over the web and none of them seem to solve my problem. I am using react and I am waiting for a response to localize the center and markers for the location.

I load the div first and then the content.

Here is my react code.

<div className="HomeMap">
    <ErrorModal error={error} onClear={clearError} />
    {isLoading && (
      <div className="loadCenter">
        <LoadingSpinner />
      </div>
    )}

    {!isLoading && MarkersMap && <div className="HomeMap"> <Map
          center={{
            lat: latitude,
            lng: longitude
          }}
          zoom={8}
          location={MarkersMap}
        />
      </div>}
 </div>

This prop

location={MarkersMap} 

is being defined using useState()

const [MarkersMap, setMarkersMap] = useState();

I should use something like an async function but instead, I went with this:

<div className = "HomeMap" > 
    {!isLoading && MarkersMap && 
    <Map 
        center = {{
            lat: latitude,
            lng: longitude
            }}
        zoom = {8}
        location = {MarkersMap}
    />} 
</div>

Which if the markers have been defined then it renders the map.

css

.map {
  width: 100%;
  height: 100%;
}

.HomeMap {
  height: 85% !important;
  width: 46% !important;
  display: block !important;
  left: auto !important;
  position: fixed !important;

  right: 1rem !important;

  margin-top: 5rem;
  margin-bottom: 20rem;
  top: 0px;
  bottom: 0px;
}

map component

import React, { useRef } from "react";

import "./Map.css";

const Map = props => {
  const mapRef = useRef();

  const { center, zoom, location } = props;

  try {
    const map = new window.google.maps.Map(mapRef.current, {
      center: center,
      zoom: zoom,
      location: location
    });

     location.map(location => {
        return new window.google.maps.Marker({ position: location, map: map });
    })

 } catch (err) {
    console.log(err);
  }

  return (
    <div
      ref={mapRef}
      className={`map ${props.className}`}
      location={props.location}
      style={props.style}
    ></div>
  );
};

export default Map;

The map result to be loaded in firefox, (after that asks permissions for geolocation) and Chrome does not loads, but if it does is after a while, giving this message:

[Violation] 'setTimeout' handler took 59ms
[Violation] 'setTimeout' handler took 51ms
[Violation] Forced reflow while executing JavaScript took 50ms

Complete message on Chrome