title: what is the meaning Uncaught TypeError: Cannot read property '_zoom' of undefined after i use react leaflet marker cluster?
body: <p>i getting stuck with using markercluster in react leaflet. i always get error Uncaught TypeError: Cannot read property '_zoom' of undefined, i already add markercluster.js, markercluster css but still face the problem.. heres my code</p>
  <pre><code>&lt;MapContainer
    className={classes.borderRadiusCardPaper}
    center={position}
    zoom={4}
    scrollWheelZoom={true}
    worldCopyJump={true}
  &gt;
  &lt;TileLayer
    attribution='&amp;copy; &lt;a href=&quot;http://osm.org/copyright&quot;&gt;GoogleMaps&lt;/a&gt; contributors'
    url=&quot;https://mt1.google.com/vt/lyrs=r&amp;x={x}&amp;y={y}&amp;z={z}&quot;
  /&gt;
  &lt;MarkerClusterGroup&gt;
    {inisiatifDataFull.map((item) =&gt; (
      &lt;div key={item.id}&gt;
        &lt;Marker
          icon={customMarkerLoc(&quot;images/markerrr.png&quot;)}
          position={[
            item.long,
            item.lat,
          ]}
        &gt;
        &lt;Popup&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;td style={{
                background:   &quot;#8ab4f8&quot;,   
                padding:      &quot;5px&quot;,
                borderRadius: &quot;6px&quot;,
                fontWeight:   &quot;bold&quot;,
                color:        &quot;white&quot;,
                }}
              &gt;Provisi
              &lt;/td&gt;
              &lt;td&gt;{item.provinsiname}&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td style={{
                background:   &quot;#8ab4f8&quot;,
                padding:      &quot;5px&quot;,
                borderRadius: &quot;6px&quot;,
                fontWeight:   &quot;bold&quot;,
                color:        &quot;white&quot;,
              }}
              &gt;Kabupaten / Kota
              &lt;/td&gt;
              &lt;td&gt;{item .kabupaten .length }&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                                  &lt;td
                                      style={{
                                          background:
                                              &quot;#8ab4f8&quot;,
                                          padding:
                                              &quot;5px&quot;,
                                          borderRadius:
                                              &quot;6px&quot;,
                                          fontWeight:
                                              &quot;bold&quot;,
                                          color: &quot;white&quot;,
                                      }}
                                  &gt;
                                      Jumlah
                                      Insiatif
                                    &lt;/td&gt;
                                  &lt;td&gt;
                                      {
                                          item.provinsiname
                                      }
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                              &lt;tr&gt;
                                  &lt;td
                                      style={{
                                          background:
                                              &quot;#8ab4f8&quot;,
                                          padding:
                                              &quot;5px&quot;,
                                          borderRadius:
                                              &quot;6px&quot;,
                                          fontWeight:
                                              &quot;bold&quot;,
                                          color: &quot;white&quot;,
                                      }}
                                  &gt;
                                      Jumlah
                                      Goal
                                    &lt;/td&gt;
                                  &lt;td&gt;
                                      {item.sdgs_goal.map(
                                          (
                                              item
                                          ) =&gt;
                                              item
                                                  .sdgs_goals
                                                  .length
                                      )}
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/table&gt;
                      &lt;/Popup&gt;
                  &lt;/Marker&gt;
              &lt;/div&gt;
          ))}
  
  
  
                       &lt;/MarkerClusterGroup&gt;
  &lt;/MapContainer&gt;
  </code></pre>
  <p>i use react 16.2
  react leaflet v3
  and then leaflet 1.7.1</p>
  <p>if you have a alternative marker cluster library.. let me know about it.. thank you</p>