我试图在谷歌Map上显示一系列位置的多个大头针。下面的代码只适用于一个位置，但是当使用多个位置时，大头针和标签会重叠，Map会显示为灰色。不知道我做错了什么，但欢迎提供指导
Map.jsx

import React from "react";
import GoogleMapReact from "google-map-react";
import LocationPin from "./LocationPin";

const Map = ({ location, zoomLevel }) => (
  <div className="map">
    <div className="w-full h-[60vh]">
      <GoogleMapReact
        bootstrapURLKeys={{ key: process.env.REACT_APP_GOOGLE_MAPS_TOKEN }}
        defaultCenter={location}
        defaultZoom={zoomLevel}
        options={{ disableDefaultUI: false, zoomControl: true }}
      >
        { location.map((location, index) => (
          <LocationPin
            lat={location.lat}
            lng={location.lng}
            text={location.address}
            key={index}
          />

      ))}
      </GoogleMapReact>
    </div>
  </div>
);

export default Map;

Locations.jsx

import React from 'react';
import Map from "../components/Map";

export const Locations = () => {
  const locations = [{
    address: "Sonoma, California, USA",
    lat: 38.208473,
    lng: -122.451803,
  },{
    address: "San Francisco, California, USA",
    lat: 37.773972,
    lng: -122.431297,
  }];

  return (
    <div className="w-full">
      <div className="mt-4">
            <Map location={locations} zoomLevel={15} />
      </div>
    </div>
  );
}

export default Locations;

LocationPin.jsx

import locationIcon from "@iconify/icons-mdi/map-marker";

const LocationPin = ({ text }) => (
  <div className="flex items-center w-[180px] text-[#00009E]">
    <Icon icon={locationIcon} className="text-6xl" />
    <p className="text-sm">{text}</p>
  </div>
);

export default LocationPin;