AMCharts - map disappearing after data is set on MapPolygonSeries (React) - reactjs

Question

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.
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 = () => {
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) => response.json())
.then((data) => setWorldData(data));
useLayoutEffect(() => {
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 () => {
if (root) {
root.dispose();
rootRef.current = null;
}
}
},[]);
useLayoutEffect(() => {
if (!worldSeriesRef.current || !worldData.length) {
return;
}
//when this is added map disappear
worldSeriesRef.current.data.setAll(worldData);
}, [worldSeriesRef.current, worldData.length]);
return <RootDiv id="rootdiv" />;
}