Jeu de piste avec React, OpenStreetMap et Pigeon Maps

import { useState } from 'react';
import { Map, Marker, Overlay } from 'pigeon-maps';
import './Map.css';
import Carbone from '/Carbone_Young.jpeg';

// Tableau `markers` contenant des objets de configuration pour chaque point de la carte.
const markers = [
  { id: 1, name: 'Tout commence', coords: [48.740784, -3.074970], color: '#0072B2', description: 'Carbone est né ici il y a un an', img: Carbone, link: null},
  { id: 2, name: 'Un abri !', coords: [48.750640, -3.073772], color: '#009E73', description: '10 avril: des enfants ont vu un chat noir qui dormait caché dans un buisson', img: null, link: null},
];

export function BreizhMap() {
  const [selectedMarker, setSelectedMarker] = useState(null);

  // Fonction `handleMarkerClick` pour sélectionner et déselectionner un point.
  const handleMarkerClick = (marker) => {
    if (selectedMarker && selectedMarker.id === marker.id) {
      setSelectedMarker(null); 
    } else {
      setSelectedMarker(marker);
    }
  };

  return (
    <div>
    
      {// Composant `Map` de `pigeon-maps` permettant d'afficher la carte. }
      <Map defaultCenter={[48.817822, -3.040615]} defaultZoom={12} height={450}>
        {/*Fonction `map()` pour parcourir chaque objet du tableau `markers` et créer un composant `Marker` pour chaque élément.*/}
        {markers.map(marker => (
          <Marker
            key={marker.id}
            anchor={marker.coords}
            color={marker.color}
            onClick={() = > handleMarkerClick(marker)}
          />
        ))}
        {/* Si un point est sélectionné les infos le concernant sont affichées */}
        {selectedMarker && (
          <Overlay anchor={selectedMarker.coords} offset={[-10, 0]}>
            <div className='mapCard'>
              <p className='mapTitle'>{selectedMarker.name}</p>
              <p>{selectedMarker.description}</p>
              {selectedMarker.img !== null ? (
                <img className='mapImg' src={selectedMarker.img} />
              ) : (<p></p>)}
            </div>
          </Overlay>
        )}
      </Map>
    </div>
  );
};