title: can't use a <Popup/> inside <Marker> while maping an array [React Leaflet]
body: <p>I'm trying to map an array where inside i use a marker component from React Leaflet. If i only use the Marker component all ok, but if inside the marker component i use a <strong>Popup</strong> component i get this error.</p>
  <p>TypeError: Cannot read property 'initialize' of undefined</p>
  <pre><code>const Location = () =&gt; {
    const [shops, setShops] = useState([]);
  
    useEffect(() =&gt; {
      const fetchShops = async () =&gt; {
        const fetchedShops = await getShops();
        console.log(fetchedShops);
        setShops(fetchedShops);
      };
      fetchShops();
    }, []);
  
    return (
      &lt;MapContainer
        center={[27.8617, -101.1255]}
        zoom={15}
        scrollWheelZoom={true}
        style={{ height: &quot;100vh&quot; }}
        zoomAnimation={true}
      &gt;
        &lt;TileLayer
          attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors'
          url=&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;
        /&gt;
  
        {shops?.map((shop) =&gt; (
          &lt;Marker position={shop?.location}&gt;
            // If i remove this all work fine
            &lt;Popup&gt;Hola mundo&lt;/Popup&gt;
          &lt;/Marker&gt;
        ))}
      &lt;/MapContainer&gt;
    );
  };
  </code></pre>