Time series representation of Map Chart using amCharts

I am creating a Map chart using amCharts5.

The data to be drawn includes latitude and longitude, title, and date as shown below.

var spots = [
{"date":1,"title":"point1","latitude":42.1613,"longitude":139.452},{"date":1,"title":"point2","latitude":41.3597,"longitude":139.806},
{"date":1,"title":"point3","latitude":40.3597,"longitude":138.605},
{"date":2,"title":"point1","latitude":42.1613,"longitude":139.452},
{"date":2,"title":"point2","latitude":41.3597,"longitude":139.806},
];

Drawing all the data was successful with the code below.

<script>
    var spots = [{
            "date": 1,
            "title": "point1",
            "latitude": 42.1613,
            "longitude": 139.452
        },
        {
            "date": 1,
            "title": "point2",
            "latitude": 41.3597,
            "longitude": 139.806
        },
        {
            "date": 1,
            "title": "point3",
            "latitude": 40.3597,
            "longitude": 138.605
        },
        {
            "date": 2,
            "title": "point1",
            "latitude": 42.1613,
            "longitude": 139.452
        },
        {
            "date": 2,
            "title": "point2",
            "latitude": 41.3597,
            "longitude": 139.806
        },
    ];
    am5.ready(function() {
        var root = am5.Root.new("spcsmap");
        root.setThemes([
            am5themes_Animated.new(root)
        ]);

        var chart = root.container.children.push(am5map.MapChart.new(root, {
            panX: "rotateX",
            panY: "translateY",
            projection: am5map.geoMercator(),
            homeZoomLevel: 1.8,
            homeGeoPoint: {
                longitude: 135,
                latitude: 35
            }
        }));

        chart.set("zoomControl", am5map.ZoomControl.new(root, {}));

        loadGeodata('JP');

        var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));

        var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {}));

        pointSeries.set("clusteredBullet", function(root) {
            var container = am5.Container.new(root, {
                cursorOverStyle: "pointer"
            });

            var circle1 = container.children.push(am5.Circle.new(root, {
                radius: 8,
                tooltipY: 0,
                fill: am5.color(0xff8c00)
            }));

            var circle2 = container.children.push(am5.Circle.new(root, {
                radius: 12,
                fillOpacity: 0.3,
                tooltipY: 0,
                fill: am5.color(0xff8c00)
            }));

            var circle3 = container.children.push(am5.Circle.new(root, {
                radius: 16,
                fillOpacity: 0.3,
                tooltipY: 0,
                fill: am5.color(0xff8c00)
            }));

            var label = container.children.push(am5.Label.new(root, {
                centerX: am5.p50,
                centerY: am5.p50,
                fill: am5.color(0xffffff),
                populateText: true,
                fontSize: "8",
                text: "{value}"
            }));
            container.events.on("click", function(e) {
                pointSeries.zoomToCluster(e.target.dataItem);
            });

            return am5.Bullet.new(root, {
                sprite: container
            });
        });

        pointSeries.bullets.push(function() {
            var circle = am5.Circle.new(root, {
                radius: 6,
                tooltipY: 0,
                fill: am5.color(0xff8c00),
                tooltipText: "{title}"
            });

            return am5.Bullet.new(root, {
                sprite: circle
            });
        });

        var container = chart.children.push(am5.Container.new(root, {
            y: am5.p100,
            centerX: am5.p50,
            centerY: am5.p100,
            x: am5.p50,
            width: am5.percent(90),
            layout: root.horizontalLayout,
            paddingBottom: 10
        }));

        var first = 1;
        var last = 7;
        var slider = container.children.push(am5.Slider.new(root, {
            orientation: "horizontal",
            start: 0,
            centerY: am5.p50
        }));

        slider.startGrip.get("icon").set("forceHidden", true);
        slider.startGrip.set("label", am5.Label.new(root, {
            text: first + "",
            paddingTop: 0,
            paddingRight: 0,
            paddingBottom: 0,
            paddingLeft: 0
        }));

        slider.events.on("rangechanged", function() {
            var date = first + Math.round(slider.get("start", 0) * (last - first));
            slider.startGrip.get("label").set("text", date + "");
        });

        chart.appear(1000, 100);

        polygonSeries.events.on("datavalidated", function() {
            chart.goHome();
        });

        const spotDatas = [];
        am5.object.each(spots, function(key, datas) {
            spotDatas.push({
                geometry: {
                    type: "Point",
                    coordinates: [datas.longitude, datas.latitude]
                },
                title: datas.title
            });
        });
        pointSeries.data.setAll(spotDatas);

        function loadGeodata(country) {
            chart.set("projection", am5map.geoMercator());

            currentMap = am5geodata_data_countries2[country]["maps"][0];

            am5.net.load("https://cdn.amcharts.com/lib/5/geodata/json/" + currentMap + ".json", chart).then(function(result) {
                var geodata = am5.JSONParser.parse(result.response);
                var data = [];
                for (var i = 0; i < geodata.features.length; i++) {
                    data.push({
                        id: geodata.features[i].id,
                    });
                }
                polygonSeries.set("geoJSON", geodata);
                polygonSeries.data.setAll(data);
            });
        }
    });
</script>

What I would like to achieve from now on is to set up a slider that corresponds to the date and switch the displayed data depending on the slider value.

I thought it could be achieved with the code below, but an error occurred.

<script>
var spots = [
    {"date":1,"title":"point1","latitude":42.1613,"longitude":139.452},
    {"date":1,"title":"point2","latitude":41.3597,"longitude":139.806},
    {"date":1,"title":"point3","latitude":40.3597,"longitude":138.605},
    {"date":2,"title":"point1","latitude":42.1613,"longitude":139.452},
    {"date":2,"title":"point2","latitude":41.3597,"longitude":139.806},
];
am5.ready(function() {
    var root = am5.Root.new("spcsmap");
    root.setThemes([
        am5themes_Animated.new(root)
    ]);

    var chart = root.container.children.push(am5map.MapChart.new(root, {
        panX: "rotateX",
        panY: "translateY",
        projection: am5map.geoMercator(),
        homeZoomLevel: 1.8,
        homeGeoPoint: {
            longitude: 135,
            latitude: 35
        }
    }));

    chart.set("zoomControl", am5map.ZoomControl.new(root, {}));

    loadGeodata('JP');

    var polygonSeries = chart.series.push(am5map.MapPolygonSeries.new(root, {}));

    var pointSeries = chart.series.push(am5map.ClusteredPointSeries.new(root, {}));

    pointSeries.set("clusteredBullet", function(root) {
        var container = am5.Container.new(root, {
            cursorOverStyle: "pointer"
        });

        var circle1 = container.children.push(am5.Circle.new(root, {
            radius: 8,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var circle2 = container.children.push(am5.Circle.new(root, {
            radius: 12,
            fillOpacity: 0.3,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var circle3 = container.children.push(am5.Circle.new(root, {
            radius: 16,
            fillOpacity: 0.3,
            tooltipY: 0,
            fill: am5.color(0xff8c00)
        }));

        var label = container.children.push(am5.Label.new(root, {
            centerX: am5.p50,
            centerY: am5.p50,
            fill: am5.color(0xffffff),
            populateText: true,
            fontSize: "8",
            text: "{value}"
        }));
        container.events.on("click", function(e) {
            pointSeries.zoomToCluster(e.target.dataItem);
        });

        return am5.Bullet.new(root, {
            sprite: container
        });
    });

    pointSeries.bullets.push(function() {
        var circle = am5.Circle.new(root, {
            radius: 6,
            tooltipY: 0,
            fill: am5.color(0xff8c00),
            tooltipText: "{title}"
        });

        return am5.Bullet.new(root, {
            sprite: circle
        });
    });

    var container = chart.children.push(am5.Container.new(root, {
        y: am5.p100,
        centerX: am5.p50,
        centerY: am5.p100,
        x: am5.p50,
        width: am5.percent(90),
        layout: root.horizontalLayout,
        paddingBottom: 10
    }));

    var first = 1;
    var last = 7;
    var slider = container.children.push(am5.Slider.new(root, {
        orientation: "horizontal",
        start: 0,
        centerY: am5.p50
    }));

    slider.startGrip.get("icon").set("forceHidden", true);
    slider.startGrip.set("label", am5.Label.new(root, {
        text: first + "",
        paddingTop: 0,
        paddingRight: 0,
        paddingBottom: 0,
        paddingLeft: 0
    }));

    slider.events.on("rangechanged", function() {
        var date = first + Math.round(slider.get("start", 0) * (last - first));
        slider.startGrip.get("label").set("text", date + "");
        updateSpcs(date);
    });

    chart.appear(1000, 100);

    polygonSeries.events.on("datavalidated", function() {
        chart.goHome();
    });

    function loadGeodata(country) {
        chart.set("projection", am5map.geoMercator());

        currentMap = am5geodata_data_countries2[country]["maps"][0];

        am5.net.load("https://cdn.amcharts.com/lib/5/geodata/json/" + currentMap + ".json", chart).then(function(result) {
            var geodata = am5.JSONParser.parse(result.response);
            var data = [];
            for (var i = 0; i < geodata.features.length; i++) {
                data.push({
                    id: geodata.features[i].id,
                });
            }
            polygonSeries.set("geoJSON", geodata);
            polygonSeries.data.setAll(data);
        });
    }

    function updateSpcs(date) {
        const spotDatas = [];
        am5.object.each(spots, function(key, datas) {
            var dataDate = datas.date;
            if (dataDate == date) {
                spotDatas.push({
                    geometry: {
                        type: "Point",
                        coordinates: [datas.longitude, datas.latitude]
                    },
                    title: datas.title
                });
            }
        });
        pointSeries.data.setAll(spotDatas);
    }
});
</script>

The contents of the error are as follows.

Uncaught Error: EventDispatcher is disposed

What should I modify to express what I want to achieve?

I tried various codes based on the amcharts documentation, but none of them worked, and the above is the closest to completion.