title: Dynamic bounds change does not give any effect in 'react-leaflet'
body: <p>I encountered the problem while trying to use the <code>react-leaflet</code>'s <code>bounds</code> property.
  My use case is that my application has some initial bounds defined in the state (let's say, fallback bounds), and those bounds are passed during the first render of component. The app architecture requires me to send request for the new bounds to set within the component, and here comes the problem.</p>
  <p>On the example below (where I've simulated AJAX request using <code>setTimeout</code>) we can notice that the new bounds which are coming from request after timeout are not set at all, and I'm not quite sure why it's happening.</p>
  <p>I suspect that is something with animation, because when increased timeout delay, the problem does not occur, and the second bounds are set correctly.</p>
  <p>My setup:</p>
  <pre><code>&quot;react&quot;: &quot;17.0.0&quot;
  &quot;leaflet&quot;: &quot;1.6.0&quot;
  &quot;react-leaflet&quot;: &quot;2.7.0&quot;
  </code></pre>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Map, ZoomControl, TileLayer } from &quot;react-leaflet&quot;;
  
  import &quot;./styles.css&quot;;
  import &quot;leaflet/dist/leaflet.css&quot;;
  
  export default function App() {
    const [bounds, setBounds] = useState([
      [75, -25],
      [30, 45]
    ]);
  
    setTimeout(() =&gt; {
      setBounds([
        [59.569068610511465, 10.387057922780514],
        [59.565111563593824, 10.397184267640114]
      ]);
    }, 200);
  
    return (
      &lt;Map
        bounds={bounds}
        maxBounds={bounds}
        zoomControl={false}
        style={{
          height: 400,
          width: 400
        }}
      &gt;
        &lt;TileLayer
          url=&quot;//{s}.google.com/vt/lyrs=s&amp;x={x}&amp;y={y}&amp;z={z}&quot;
          maxZoom={21}
          minZoom={4}
          minZoomIsDrawing={18}
          subdomains={[&quot;mt0&quot;, &quot;mt1&quot;, &quot;mt2&quot;, &quot;mt3&quot;]}
        /&gt;
        &lt;ZoomControl /&gt;
      &lt;/Map&gt;
    );
  }
  </code></pre>
  <p>Live example: <a href="https://codesandbox.io/s/keen-silence-vnt23" rel="nofollow noreferrer">https://codesandbox.io/s/keen-silence-vnt23</a></p>