title: How do I get react-leaflet or leaflet to dynamically change the name of the LayersControl.Overlay
body: <p>In the following I have a snippet of code that I use to add LayerControls to my react-leaflet map.</p>
  <p>Notice the name is set to a date string. This &quot;vae&quot; object changes asynchronously (fetched from web server periodically).</p>
  <pre><code>{vaes.map(function (vae, vae_idx) {
                return (
                  &lt;LayersControl.Overlay name={vae.date.toString()}&gt;
                    &lt;MyVaeView
                      vae={vae}
                      vae_idx={vae_idx}
                      zoom={zoom}
                      markerRadius={markerRadius}
                    /&gt;
                  &lt;/LayersControl.Overlay&gt;
                );
              })}
  </code></pre>
  <p>I expect the layer control name to change. However it doesnt it stays fixed at the first date that I set (07:31:00 in the following). The rendered custom react component &quot;MyVaeView&quot; does however reflect that updated vae object (with the proper date: 07:31:07 in the following)</p>
  <p><a href="https://i.stack.imgur.com/ozAUD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ozAUD.png" alt="enter image description here" /></a></p>
  <p>The vae.date updates once per second, and I have at most 6 overlay layers. The layer control names should move in a 6 second rolling window.</p>
  <p><a href="https://i.stack.imgur.com/iutJx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iutJx.png" alt="enter image description here" /></a></p>
  <p>How Can I get react-leaflet and leaflet to change the name of the LayersControl.Overlay?</p>