how to render multiple markers in google maps Reactjs with @react-google-maps/api

Question

I am just trying to add multiple markers with react-google-maps/api but not showing them and in console there is no error shown can you please guide me how to add multiple marker my code is here:

import React, { useEffect, useState } from "react";
import {
  GoogleMap,
  Marker,
  InfoWindow,
  useJsApiLoader,
} from "@react-google-maps/api";
const Map = () => {
  const markers = [
    {
      id: 1,
      name: "Chicago, Illinois",
      position: { lat: 41.881832, lng: -87.623177 },
    },
    {
      id: 2,
      name: "Denver, Colorado",
      position: { lat: 39.739235, lng: -104.99025 },
    },
    {
      id: 3,
      name: "Los Angeles, California",
      position: { lat: 34.052235, lng: -118.243683 },
    },
    {
      id: 4,
      name: "New York, New York",
      position: { lat: 40.712776, lng: -74.005974 },
    },
  ];
  const mapStyles = {
    height: "100vh",
    width: "100%",
  };

  const defaultCenter = {
    lat: 40.712776,
    lng: -74.005974,
  };
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: "AIzaSyAxiQDX9NKpFJqkd6jz2m43YgHh9DgDCos",
  });
  if (!isLoaded) {
    return <div>Google Maps is not loaded</div>;
  }
  return (
    <>
      <GoogleMap mapContainerStyle={mapStyles} zoom={13} center={defaultCenter}>
        {markers &&
          markers.map(({ id, name, position }, index) => (
            <Marker position={position} key={index} />
          ))}
      </GoogleMap>
    </>
  );
};

export default Map;

this is my code and when I displays one marker it is working but multiple markers is not working and some time one marker is also not working and it is remove and declare it again then it working but multiple markers still not working.