javascript - react-leaflet LayersControl は、リストに重複する項目を生成します

Question

私のバージョン: React: 16.0.0 react-leaflet: 1.6.6

マップにレイヤー コントローラーを追加しようとしました。2 つのレイヤーがあり、それぞれに複数のマーカーが含まれています。これは私がやろうとしたことの例です。

import React, { Component }  from 'react'
import { render } from 'react-dom'
import { Map, TileLayer, Circle, Marker, Popup, LayersControl, LayerGroup } from 'react-leaflet'

class SimpleExample extends Component {
  constructor() {
    super()
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 3,
      radius: 0
    };
    this.onClick1 = this.onClick1.bind(this);
    this.onClick2 = this.onClick2.bind(this);

  }

  getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }

  onClick1(){
    this.setState({radius: this.getRandomArbitrary(100, 800)});
  }

  onClick2(){
    this.setState({radius: 0});
  }

  renderFirst() {
    var result = [];
    for(var i =0; i < 10; i++) {
     result.push(
       <Marker position={[i,i]}>
         <Popup>
           <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
         </Popup>
       </Marker>
    )}
    return result;
  }

  renderSecond() {
   return <MyLayer latlng={[1, 10]} radius={this.state.radius}/>
  }

  render() {
    return (
      <div>
        <button name="btn" onClick={this.onClick1}>Click me</button>
        <button name="btn" onClick={this.onClick2}>Then me</button>

      <Map center={[0, 0]} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <LayersControl position='topleft'>
           <LayersControl.Overlay checked name="first layer">
            {this.renderFirst()}
          </LayersControl.Overlay>
          <LayersControl.Overlay checked name="second layer">
            {this.renderSecond()}
          </LayersControl.Overlay>
        </LayersControl>


      </Map>
        </div>
    );
  }
}


class MyLayer extends Component {
  constructor(props) {
    super(props);
  }


  render() {
    if (this.props.radius === 0) {
      return <LayerGroup/>;
    }
    return (<LayerGroup>
               <Circle center={this.props.latlng} fillColor="red" radius={this.props.radius}/>
            </LayerGroup>);
  }

}


render(<SimpleExample />, document.getElementById('container')) 

ここでコードを実行します: https://www.webpackbin.com/bins/-Kvmu5PPSjeS4lY-qe_E

問題は、レンダリング後、リストに 2 つのレイヤーしかないことです。現在、各レイヤーの各アイテムがリストに表示されています。その理由は、マーカーを配列にプッシュして返すためだと思います。ただし、レイヤーごとに 1 つのリストを表示するための回避策が何であるかはわかりません。