How to use the @amcharts/amcharts4/maps.MapPolygonSeries function in @amcharts/amcharts4

// Chech if proper geodata is loaded
try {
	chart.geodata = am4geodata_worldLow;
}
catch (e) {
	chart.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href="\&quot;https://www.amcharts.com/download/download-v4/\&quot;">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."));
}

// Set projection to be used
// @see {@link https://www.amcharts.com/docs/v4/reference/mapchart/#projection_property}
chart.projection = new am4maps.projections.Miller();

// Create polygon series
let polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.exclude = ["AQ"]; // Exclude Antractica
polygonSeries.tooltip.fill = am4core.color("#000000");

let colorSet = new am4core.ColorSet();

// Configure polygons
let polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.tooltipText = "{name}";
polygonTemplate.togglable = true;

// Set events to apply "active" state to clicked polygons
let currentActive;
polygonTemplate.events.on("hit", (event) =&gt; {
	// if we have some country selected, set default state to it
	if (currentActive) {

"id": "oceania",
  "color": chart.colors.getIndex(2)
}, {
  "id": "europe",
  "color": chart.colors.getIndex(3)
}, {
  "id": "northAmerica",
  "color": chart.colors.getIndex(4)
}, {
  "id": "southAmerica",
  "color": chart.colors.getIndex(5)
}];


// Countries
var countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
var countries = countriesSeries.mapPolygons;
countriesSeries.visible = false; // start off as hidden
countriesSeries.exclude = ["AQ"];

try {
  countriesSeries.geodata = am4geodata_worldLow;
}
catch (e) {
  countriesSeries.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest <a href="\&quot;https://www.amcharts.com/download/download-v4/\&quot;">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."));
}

countriesSeries.useGeodata = true;
// Hide each country so we can fade them in
countriesSeries.events.once("inited", function() {
  hideCountries();
});

"id": "oceania",
  "color": chart.colors.getIndex(2)
}, {
  "id": "europe",
  "color": chart.colors.getIndex(3)
}, {
  "id": "northAmerica",
  "color": chart.colors.getIndex(4)
}, {
  "id": "southAmerica",
  "color": chart.colors.getIndex(5)
}];


// Countries
var countriesSeries = chart.series.push(new am4maps.MapPolygonSeries());
var countries = countriesSeries.mapPolygons;
countriesSeries.visible = false; // start off as hidden
countriesSeries.exclude = ["AQ"];

try {
  countriesSeries.geodata = am4geodata_worldLow;
}
catch (e) {
  countriesSeries.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest amcharts geodata and extract its contents into the same directory as your amCharts files."));
}

countriesSeries.useGeodata = true;
// Hide each country so we can fade them in
countriesSeries.events.once("inited", function() {
  hideCountries();
});

try {
  mapChart.geodata = am4geodata_continentsLow;
}
catch (e) {
  mapChart.raiseCriticalError(new Error("Map geodata could not be loaded. Please download the latest amcharts geodata and extract its contents into the same directory as your amCharts files."));
}

mapChart.projection = new am4maps.projections.Miller;
// prevent dragging
mapChart.seriesContainer.draggable = false;
mapChart.seriesContainer.resizable = false;
// prevent zooming
mapChart.minZoomLevel = 1;
// countries
var countriesSeries = mapChart.series.push(new am4maps.MapPolygonSeries());
countriesSeries.useGeodata = true;
countriesSeries.mapPolygons.template.fill = am4core.color("#47c78a");
countriesSeries.mapPolygons.template.stroke = am4core.color("#47c78a");

var colorSet = new am4core.ColorSet();
var polygonTemplate = countriesSeries.mapPolygons.template;

// night series
var nightSeries = mapChart.series.push(new am4maps.MapPolygonSeries());
nightSeries.ignoreBounds = true;
var night = nightSeries.mapPolygons.create();
night.fill = am4core.color("#000000");
night.fillOpacity = 0.35;
night.interactionsEnabled = false;
night.stroke = am4core.color("#000000");
night.strokeOpacity = 0;

try {
    chart.geodata = am4geodata_worldHigh;
}
catch (e) {
    chart.raiseCriticalError({
        "message": "Map geodata could not be loaded. Please download the latest <a href="\&quot;https://www.amcharts.com/download/download-v4/\&quot;">amcharts geodata</a> and extract its contents into the same directory as your amCharts files."
    });
}

chart.projection = new am4maps.projections.Mercator();
chart.padding(0, 20, 0, 20);
chart.minZoomLevel = 0.9;
chart.zoomLevel = 0.9;
chart.maxZoomLevel = 1;

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.include = ["AF"];


var chart1 = am4core.create("hiddenchartdiv", am4maps.MapChart);
chart1.geodata = am4geodata_worldHigh;
chart1.projection = new am4maps.projections.Mercator();

var polygonSeries1 = chart1.series.push(new am4maps.MapPolygonSeries());
polygonSeries1.useGeodata = true;
polygonSeries1.include = ["AF"];


var label = chart.chartContainer.createChild(am4core.Label);
label.x = 100;
label.y = 100;

femaleSeries.fill = femaleChart.colors.getIndex(4);
femaleSeries.stroke = femaleSeries.fill;
//femaleSeries.sequencedInterpolation = true;
femaleSeries.columns.template.tooltipText = "Females, age{categoryY}: {valueX} ({valueX.percent.formatNumber('#.0')}%)";
femaleSeries.dataFields.categoryY = "age";
femaleSeries.interpolationDuration = 1000;


var mapChart = mainContainer.createChild(am4maps.MapChart);
mapChart.projection = new am4maps.projections.AlbersUsa();
mapChart.geodata = am4geodata_usaHigh;
mapChart.zoomControl = new am4maps.ZoomControl();
mapChart.zIndex = -1;


var polygonSeries = mapChart.series.push(new am4maps.MapPolygonSeries())
polygonSeries.useGeodata = true;

var selectedStateId = "US";
var selectedPolygon;
var selectedStateName;

var polygonTemplate = polygonSeries.mapPolygons.template;
polygonTemplate.togglable = true;

var hoverState = polygonTemplate.states.create("hover");
hoverState.properties.fill = mapChart.colors.getIndex(2);

var activeState = polygonTemplate.states.create("active");
activeState.properties.fill = mapChart.colors.getIndex(6);

polygonTemplate.events.on("hit", function(event) {

series.dataFields.dateX = 'date';
      series.dataFields.valueY = 'value';

      series.tooltipText = '{valueY.value}';
      chart.cursor = new am4charts.XYCursor() as any;

      const scrollbarX = new am4charts.XYChartScrollbar();
      scrollbarX.series.push(series);
      chart.scrollbarX = scrollbarX as any;
    }

    /**
     * MAP
     */
    if (tsChartMapTypeCheck(chart)) {
      const polygonSeries = new am4maps.MapPolygonSeries();
      polygonSeries.useGeodata = true;
      polygonSeries.include = [
        'PT',
        'ES',
        'FR',
        'DE',
        'BE',
        'NL',
        'IT',
        'AT',
        'GB',
        'IE',
        'CH',
        'LU',
        'GF',
        'SR',

chart.projection = new am4maps.projections.Mercator();
chart.padding(0, 20, 0, 20);
chart.minZoomLevel = 0.9;
chart.zoomLevel = 0.9;
chart.maxZoomLevel = 1;

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.include = ["AF"];


var chart1 = am4core.create("hiddenchartdiv", am4maps.MapChart);
chart1.geodata = am4geodata_worldHigh;
chart1.projection = new am4maps.projections.Mercator();

var polygonSeries1 = chart1.series.push(new am4maps.MapPolygonSeries());
polygonSeries1.useGeodata = true;
polygonSeries1.include = ["AF"];


var label = chart.chartContainer.createChild(am4core.Label);
label.x = 100;
label.y = 100;
label.fill = am4core.color("#000000");
label.fontSize = 35;
label.fontWeight = "bold";
label.text = "Afghanistan";
label.fillOpacity = 0.2;

var slider = chart.createChild(am4core.Slider);
slider.padding(0, 15, 0, 60);
slider.background.padding(0, 15, 0, 60);

chart.projection = new am4maps.projections.Mercator();
chart.padding(0, 20, 0, 20);
chart.minZoomLevel = 0.9;
chart.zoomLevel = 0.9;
chart.maxZoomLevel = 1;

var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries());
polygonSeries.useGeodata = true;
polygonSeries.include = ["AF"];


var chart1 = am4core.create("hiddenchartdiv", am4maps.MapChart);
chart1.geodata = am4geodata_worldHigh;
chart1.projection = new am4maps.projections.Mercator();

var polygonSeries1 = chart1.series.push(new am4maps.MapPolygonSeries());
polygonSeries1.useGeodata = true;
polygonSeries1.include = ["AF"];


var label = chart.chartContainer.createChild(am4core.Label);
label.x = 100;
label.y = 100;
label.fill = am4core.color("#000000");
label.fontSize = 35;
label.fontWeight = "bold";
label.text = "Afghanistan";
label.fillOpacity = 0.2;

var slider = chart.createChild(am4core.Slider);
slider.padding(0, 15, 0, 60);
slider.background.padding(0, 15, 0, 60);

}
})

let hs = polygonSeries.mapPolygons.template.states.create("hover");
hs.properties.fillOpacity = 1;
hs.properties.fill = am4core.color("#deb7ad");


let graticuleSeries = chart.series.push(new am4maps.GraticuleSeries());
graticuleSeries.mapLines.template.stroke = am4core.color("#fff");
graticuleSeries.fitExtent = false;
graticuleSeries.mapLines.template.strokeOpacity = 0.2;
graticuleSeries.mapLines.template.stroke = am4core.color("#fff");


let measelsSeries = chart.series.push(new am4maps.MapPolygonSeries())
measelsSeries.tooltip.background.fillOpacity = 0;
measelsSeries.tooltip.background.cornerRadius = 20;
measelsSeries.tooltip.autoTextColor = false;
measelsSeries.tooltip.label.fill = am4core.color("#000");
measelsSeries.tooltip.dy = -5;

let measelTemplate = measelsSeries.mapPolygons.template;
measelTemplate.fill = am4core.color("#bf7569");
measelTemplate.strokeOpacity = 0;
measelTemplate.fillOpacity = 0.75;
measelTemplate.tooltipPosition = "fixed";



let hs2 = measelsSeries.mapPolygons.template.states.create("hover");
hs2.properties.fillOpacity = 1;