如何在@react-google-map/api组件上更改标记的颜色和添加信息窗口？

import React, { useState } from 'react';
import { GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';

const MapComponent = () => {
  const [selectedMarker, setSelectedMarker] = useState(null);

  const markers = [
    { id: 1, position: { lat: 37.7749, lng: -122.4194 }, color: 'red', info: 'Marker 1' },
    { id: 2, position: { lat: 37.7749, lng: -122.4294 }, color: 'blue', info: 'Marker 2' },
    // Add more markers as needed
  ];

  const handleMarkerClick = (marker) => {
    setSelectedMarker(marker);
  };

  return (
    <GoogleMap
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
      mapContainerStyle={{ height: '400px', width: '100%' }}
    >
      {markers.map((marker) => (
        <Marker
          key={marker.id}
          position={marker.position}
          onClick={() => handleMarkerClick(marker)}
          icon={{
            url: `https://maps.google.com/mapfiles/ms/icons/${marker.color}-dot.png`,
          }}
        />
      ))}

      {selectedMarker && (
        <InfoWindow
          position={selectedMarker.position}
          onCloseClick={() => setSelectedMarker(null)}
        >
          <div>{selectedMarker.info}</div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
};

export default MapComponent;