title: cannot make react-leaflet to update markers dynamically: it gives TypeError: Cannot read property 'leafletElement' of undefined
body: <p>I have the table and I have the react-leaflet component drawn in a single tab (rc-tabs). They are not connected but Redux.
  I have rows in the table with coordinates. When I click on the row, coordinates are passed into Tab component and then via props are moved to map and are drawn.</p>
  
  <p>Well, they should be - when I pass the whole array of rows with coordinates - they are drawn just fine, but when I am passing single values - I meet some troubles.</p>
  
  <p>I have testsData - where all rows are stored and, depending on what row is clicked, I find the index. When I pass to Map testData[0] - it is drawn fine. When I try to change the index with the help of redux - I got an error. I use approach with index and before that I used another - where I passed the whole row into the props - no luck.</p>
  
  <pre><code> const Map = (props) =&gt; {
  
      return (
  
          &lt;LeafMap
              preferCanvas={true}
              zoom={zoom}
              style={mapHeightStyle}&gt;
              &lt;TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                         attribution="&amp;copy; &lt;a href=&amp;quot;http://osm.org/copyright&amp;quot;&gt;OpenStreetMap&lt;/a&gt; contributors"
              /&gt;
  
                  {props.tests.map(item =&gt; (
                      &lt;Marker
  
                      className={item.id}
                      key={item.id}
                      position={item.coordinates[0], item.coordinates[1]}
  
                      }
                  &gt;
                      &lt;/Marker&gt;
  
                  ))}
              &lt;/FeatureGroup&gt;
          &lt;/LeafMap&gt;
      )
  };
  </code></pre>
  
  <p>And here is my Tabs component (I cut some code!)</p>
  
  <pre><code>const Tabs = () =&gt; {
  
      let clickedTestRow = useSelector(state =&gt; state.deviceTestsTable.rowClicked);
      let testsData = useSelector(state =&gt; state.fetchTestsData.testsData);
      let [markers, setMarkers] = useState([]);
      let clickedTestRowIndex = 0;
  
      if (Object.keys(clickedTestRow).length) {
          clickedTestRowIndex = testsData.findIndex(x =&gt; x.id === clickedTestRow.id);
  
          if (!markers.includes(clickedTestRow)) {
              setMarkers(testsData[clickedTestRowIndex]]);
          }
      }
  
  
  
      // initial value - showing the first row on map
  
  useEffect(() =&gt; {
          if (testsData.length &gt; 0) {
              setMarkers([testsData[clickedTestRowIndex]]);
          }
      }, [testsData]);
  
  
      let props = {
          tests: markers
      };
  
  
      const tabs = [
          {key: 'Map', component: &lt;Map {...props}/&gt;, disabled: false},
      ];
  </code></pre>
  
  <p>What am I missing? Every time I have TypeError: Cannot read property 'leafletElement' of undefined</p>