javascript - react-leaflet Map コンポーネントをラップするタグが消える

Question

<DeviceControls/>コンポーネントと一緒に兄弟コンポーネントを追加しようとしてい<MapContainer/>ます。しかし、そうすると、OpenStreetMap / Leaflet マップが DOM から消え、ページに表示されるのは<DeviceControls/>コンポーネントのコンテンツだけになります。

PaulLeCam/react-leaflet ( https://github.com/blob/70cd9f32bb6461df65b0d07b9810d5e9ddf459ad/example/components/index.js )の公式の例と同じことをしているように見えるので、これは特に混乱します。

const examples = (
  <div>
    <h1>React-Leaflet examples</h1>
    <h2>Popup with Marker</h2>
    <SimpleExample />
    <h2>Events</h2>
    <p>Click the map to show a marker at your detected location</p>
      ...
    <EventsExample />
    <h2>WMS tile layer</h2>
    <WMSTileLayerExample />
  </div>
)

多くの Map コンポーネントと並んで多くの React コンポーネントがあり、それらがすべてページに表示されます。

これと同じことを試してみると、なぜうまくいかないのか誰にもわかりますか? <MapContainer/>つまり、コンポーネントを a でラップ<div>すると、<MapCOntainer/>コンポーネントが私のコードでは消えているように見えますが、公式のサンプルコードでは消えていないのはなぜですか?

render() {
    return (
        <div>
            <MapContainer />    
            <DeviceControls />
        </div>
    );
}