Markers not rendering using @react-google-maps/api

Question

I'm relatively new to react world and particularly to using google maps. I'm using @react-google-maps/api and React version 18. I'm trying to display multiple locations (as markers), however, they are not being displayed on the initial render. I followed the documentation, and I don't get any errors, just markers are not shown. does anyone know why? Thank you! Here is the code:

const GoogleMapComponent = () => {
  const markers = useSelector(filteredMarkers);

  const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
    googleMapsApiKey: |||||||||||||||||||||||||||||
  });

  const [map, setMap] = useState<google.maps.Map | null>(null);

  const onLoad = React.useCallback(function callback(map: google.maps.Map) {
    setMap(map);
  }, []);

  const onUnmount = React.useCallback(function callback(map: google.maps.Map) {
    setMap(null);
  }, []);

  return isLoaded ? (
    <div style={{ width: "100%", height: "80vh" }}>
      <GoogleMap
        mapContainerStyle={MapSettings.containerStyle}
        center={MapSettings.center}
        zoom={3}
        options={MapSettings.defaultMapOptions}
        onLoad={onLoad}
        onUnmount={onUnmount}
      >
        {markers?.map((marker) => (
          <Marker
            icon={{
              path: google.maps.SymbolPath.CIRCLE,
              scale: 3,
            }}
            position={marker.location}
            key={marker.id}
          />
        ))}
      </GoogleMap>
    </div>
  ) : (
    <div>
      <Spinner />
    </div>
  );
};