title: Need proper way to render jsx component inside Leaflet popup when using geojson pointToLayer function
body: <p>Hi is there any way to pass jsx component to bindPopup function so I can push redux commands on button click?</p>
  <pre><code> pointToLayer={(
        geoJsonPoint: Feature&lt;Point, DeviceProperties&gt;,
        latlng,
      ) =&gt; {
        const marker = L.marker(latlng);
        marker.setIcon(
          markerIcon({ variant: geoJsonPoint.properties.relation }),
        );
  
        const sddds = (
          &lt;div className=&quot;font-quicksand&quot;&gt;
            &lt;h2&gt;{geoJsonPoint.properties.id}&lt;/h2&gt;
            &lt;h2&gt;{geoJsonPoint.properties.name}&lt;/h2&gt;
            &lt;p&gt;{geoJsonPoint.properties.description}&lt;/p&gt;
            &lt;p&gt;{geoJsonPoint.properties.ownerId}&lt;/p&gt;
            &lt;a
              onClick={() =&gt; {
                dispatch(setDevice(geoJsonPoint.properties));
              }}
            &gt;
              Open device details
            &lt;/a&gt;
          &lt;/div&gt;
        );
  
        marker.bindPopup(renderToString(sddds));
        return marker;
      }}
  </code></pre>
  <p>I know I can use react leaflet  component but that way I cant pass props into every marker options (I mean marker as layer).</p>