如何在不使用refs和手动修改DOM的情况下，使用react leaflet向地图添加图例？

import { Map, TileLayer, LayersControl } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';

class MapComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      legendVisible: false
    };
  }
  
  // ...
}

render() {
  const { BaseLayer, Overlay } = LayersControl;
  const { legendVisible } = this.state;

  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <LayersControl position="topright">
        <BaseLayer checked name="Base Layer">
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        </BaseLayer>
        <Overlay checked={legendVisible} name="Legend">
          {/* 在这里添加图例的内容 */}
        </Overlay>
      </LayersControl>
    </Map>
  );
}

const Legend = () => (
  <div className="legend">
    <div className="legend-item">
      <span className="legend-color" style={{ backgroundColor: 'red' }}></span>
      <span className="legend-label">Red</span>
    </div>
    <div className="legend-item">
      <span className="legend-color" style={{ backgroundColor: 'blue' }}></span>
      <span className="legend-label">Blue</span>
    </div>
    {/* 添加更多图例项 */}
  </div>
);

render() {
  // ...

  return (
    <Map center={[51.505, -0.09]} zoom={13}>
      <LayersControl position="topright">
        {/* ... */}
        <Overlay checked={legendVisible} name="Legend">
          {legendVisible && <Legend />}
        </Overlay>
      </LayersControl>
    </Map>
  );
}