InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama @react-google-maps/api

Question

I am using @react-google-maps/api and loading the script from cdn to my public directory index.html file.

I get InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama and the markers do not appear on my map. Weird thing is that it is totally random to get this error. Sometimes it works without any problem. That is what I do not understand in the first place.

import React, { useEffect } from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
import mapStyles from './mapStyles';
//google map height 100
import './MapDisplay.css';

import { connect } from 'react-redux';

const mapContainerStyle = {
  height: '100%',
  width: '100%',
};
const options = {
  styles: mapStyles,
  disableDefaultUI: true,
  zoomControl: true,
};

const MapDisplay = ({
  userLocation,
  mouseHoverIdR,
  selectedInfoR,
  searchedResults,
  unAuthNoSearchResults,
  selectedLocationInfoWindowS,
}) => {
  const onClickMarker = (e) => {
    selectedLocationInfoWindowS({
      selectedInfoR: e,
      type: 'infoWindowLocations',
    });
  };
  const onClickMap = () => {
    selectedLocationInfoWindowS({
      type: '',
      selectedInfoR: {
        _id: '',
      },
    });
  };

  return (
    <div id='map'>
      <GoogleMap
        id='map_canvas'
        mapContainerStyle={mapContainerStyle}
        zoom={12}
        center={userLocation}
        options={options}
        onClick={() => onClickMap()}
      >
        {!unAuthNoSearchResults &&
          searchedResults.map((searchedResult) => {
            if (
              mouseHoverIdR === searchedResult._id ||
              selectedInfoR._id === searchedResult._id
            ) {
              var a = window.google.maps.Animation.BOUNCE;
            }

            return (
              <Marker
                position={searchedResult.coordinates}
                key={searchedResult._id}
                clickable
                onClick={() => onClickMarker(searchedResult)}
                animation={a}
                id={'hello'}
              />
            );
          })}
     
      </GoogleMap>
    </div>
  );
};

How can I fix the error that I get when I try to display the marker on the map?