highchart multiple chart type duplicates the series as many as the chart types

I’m trying to load multiple chart type here using Highchart.

function loadChartDataMultiViz(variables, chartTypes, chartId) {
    $.ajax({
        url: '/datacap/site/getdatamulti',
        data: { variable: variables }, // Pass comma-separated variables
        success: function(response) {
            if (Object.keys(response).length > 0) {
                var series = [];
                var categories = Object.keys(response); // Extract years for x-axis
                var titles = [];
                chartTypes = chartTypes.split(',').map(type => type.trim());
                // Create a separate series for each chart type
                chartTypes.forEach(chartType => {
                    if (chartType === 'pie') {
                        // For pie charts, format the series differently
                        series.push({
                            type: chartType,
                            name: 'Data', // Generic name for the pie chart
                            colorByPoint: true,
                            data: categories.map(year => {
                                return {
                                    name: year, // Use year or any relevant label for each slice
                                    y: response[year][Object.keys(response[year])[0]].value || 0 // Use value for each slice, default to 0 if missing
                                };
                            })
                        });

                        // Collect titles for pie chart
                        titles.push(response[categories[0]][Object.keys(response[categories[0]])[0]].title);
                    } else {
                        // For other chart types (e.g., line, bar), create a series for each variable
                        for (const variable of Object.keys(response[categories[0]])) {
                            const data = categories.map(year => {
                                return response[year][variable] ? response[year][variable].value : 0; // Default to 0 if not available
                            });

                            series.push({
                                type: chartType,
                                name: variable, // Use the variable name for the series
                                data: data,
                            });

                            // Collect titles for each variable
                            if (response[categories[0]][variable] && response[categories[0]][variable].title) {
                                titles.push(response[categories[0]][variable].title);
                            }
                        }
                    }
                });

                Highcharts.chart(chartId, {
                    chart: {
                        type: 'container' // Use a container chart to hold multiple series
                    },
                    title: {
                        text: titles.join(',<br>'), // Combine all variable titles with a comma
                        align: 'left'
                    },
                    xAxis: {
                        categories: categories,
                        title: {
                            text: 'Year' // Example label for x-axis
                        }
                    },
                    yAxis: {
                        title: {
                            text: response[categories[0]][Object.keys(response[categories[0]])[0]].unit || 'Values'
                        }
                    },
                    series: series, // Pass the constructed series (formatted for pie or other charts)
                    annotations: [],
                    plotOptions: {
                        area: {            
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            }
                        },
                        scatter: {
                            tooltip: {
                                pointFormatter: function () {
                                    // Customize the tooltip for scatter points
                                    return 'Year: <b>' + this.category + '</b><br>' +
                                        'Value: <b>' + this.y + '</b>';
                                }
                            },
                            lineWidth: 0, // Remove any connecting lines for the scatter plot
                            marker: {
                                radius: 5 // You can adjust the marker size here
                            }
                        }
                    },
                }, function (chart) {
                    // Add annotations after the chart is created
                    const data = chart.series[0].data.map(point => point.y);
                    addAnnotations(chart, data, 'highest'); // Annotate highest value
                    addAnnotations(chart, data, 'latest');  // Annotate latest value
                });
            }
        }
    });
}

My problem is, why is the data showing up 3 times for 3 variables (if I use 3 types of chart-type) here? This shows the title and everything else (legend, tooltips) also 3 times:

loadChartDataMultiViz('4,5,8', 'area,spline,column', 'd3-chart1'); // Example for multiple series

The code shows fine if I choose only one type of chart, like this:

loadChartDataMultiViz('4,5,6', 'spline', 'd3-chart2'); // Example for multiple series 
loadChartDataMultiViz('12,8', 'area', 'd3-chart3'); // Example for multiple series