title: AMCharts - map disappearing after data is set on MapPolygonSeries (React)
body: <p>I hope someone can help with this one.
  I'm using AMCharts packages as dependencies in the React app. Everything works till I set data on MapPolygonSeries (note: it works if all is set inside the same useLayoutEffect(), but that may work for basic setup but for further development is not an option).
  Here is a code example.</p>
  <pre><code>import { useLayoutEffect, useRef, useState } from 'react';
  import styled from 'styled-components';
  
  import * as am5 from '@amcharts/amcharts5';
  import * as am5map from '@amcharts/amcharts5/map';
  import am5themes_Animated from '@amcharts/amcharts5/themes/Animated';
  import am5geodata_worldLow from '@amcharts/amcharts5-geodata/worldLow';
  
  const RootDiv = styled.div`
    widht: 100%;
    height: 500px;
  `;
  
  const AmChartsMapView = () =&gt; {
   const worldSeriesRef = useRef(null);
   const [worldData, setWorldData] = useState([]);
  
  // for this example assume that data is correctly structured (e.g. [{id: 'countryId', value: 'some number'}] )
  fetch('http://some-location-data.com/data.json')
    .then((response) =&gt; response.json())
    .then((data) =&gt; setWorldData(data));
  
  useLayoutEffect(() =&gt; {
      const root = am5.Root.new('rootdiv');
      root.setThemes([am5themes_Animated.new(root)]);
  
      const chart = am5map.MapChart.new(root, {
        panX: 'translateX',
        panY: 'translateY',
        projection: am5map.geoMercator(),
      });
  
      root.container.children.push(chart);
  
      const worldSeries = am5map.MapPolygonSeries.new(root, {
        geoJSON: am5geodata_worldLow,
        exclude: ['AQ'],
        valueField: 'value',
        calculateAggregates: true,
      });
  
      worldSeries.mapPolygons.template.setAll({
        tooltipText: '{name}: {value}',
        interactive: true,
        fill: am5.color(0xaaaaaa),
        templateField: 'polygonSettings',
      });
  
      chart.series.push(worldSeries);
      worldSeriesRef.current = worldSeries;
  
      return () =&gt; {
        if (root) {
            root.dispose();
            rootRef.current = null;
        }
      }
  
  },[]);
  
  
  useLayoutEffect(() =&gt; {
      if (!worldSeriesRef.current || !worldData.length) {
        return;
      }
  
      //when this is added map disappear
      worldSeriesRef.current.data.setAll(worldData);
    }, [worldSeriesRef.current, worldData.length]);
  
   return &lt;RootDiv id=&quot;rootdiv&quot; /&gt;;
  }
  </code></pre>