如何在react- leaflet中添加弹出窗口到WMS层

import React, { useState } from 'react';
import { MapContainer, TileLayer, WMSTileLayer, Popup } from 'react-leaflet';

const Map = () => {
  const [popupContent, setPopupContent] = useState(null);

  const handlePopupOpen = (e) => {
    setPopupContent(e.target.feature.properties);
  };

  const handlePopupClose = () => {
    setPopupContent(null);
  };

  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '100vh', width: '100%' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <WMSTileLayer
        url="http://your-wms-service-url"
        layers="your-wms-layer"
        format="image/png"
        transparent={true}
        attribution="Your attribution"
        onEachFeature={(feature, layer) => {
          layer.on('click', handlePopupOpen);
        }}
      />
      {popupContent && (
        <Popup position={[popupContent.lat, popupContent.lon]} onClose={handlePopupClose}>
          <div>
            <h2>{popupContent.title}</h2>
            <p>{popupContent.description}</p>
          </div>
        </Popup>
      )}
    </MapContainer>
  );
};

export default Map;