How to set “date” and “category” axes one below another in amChart4

I am trying to place two axes below the chart, one that will display the name of the “part”, in this example “Part_1”, and below it the corresponding date. As in the example below.

This is how it looks with provided code

And this is what I’m trying to achive

Here I have a working example with data and everything:

    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4charts.XYChart);

    var data = [
                  {
                    "Part_1_bad": 20,
                    "Part_2_bad": 20,
                    "Part_1_good": 20,
                    "Part_2_good": 40,
                    "date": "2023-11-23",
                    "name": "Part 1"
                  },
                  {
                    "Part_1_bad": 20,
                    "Part_2_bad": 30,
                    "Part_1_good": 30,
                    "Part_2_good": 50,
                    "date": "2023-11-24",
                    "name": "Part 2"
                  },
                  {
                    "Part_1_bad": 20,
                    "Part_2_bad": 10,
                    "Part_1_good": 25,
                    "Part_2_good": 60,
                    "date": "2023-11-25",
                    "name": "Part 3"
                  }
                ];

    var part_names = ["Part_1", "Part_2"];

    chart.data = data;

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.labels.template.dy = 30

    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    valueAxis.tooltip.disabled = true;


    var createSeries = function (part_name) {

      var series_good = chart.series.push(new am4charts.ColumnSeries());
      series_good.data = this.chartData;
      series_good.dataFields.valueY = part_name.concat("_good");
      series_good.dataFields.dateX = "date";
      series_good.fillOpacity = 0.5;
      series_good.columns.template.column.strokeWidth = 1.5;
      series_good.columns.template.column.strokeOpacity = 1.0;
      series_good.columns.template.column.stroke = am4core.color("#008000");
      series_good.columns.template.column.fill = am4core.color("#008000");

      var series_bad = chart.series.push(new am4charts.ColumnSeries());
      series_bad.data = this.chartData;
      series_bad.dataFields.valueY = part_name.concat("_bad");
      series_bad.dataFields.dateX = "date";
      series_bad.fillOpacity = 0.5;
      series_bad.columns.template.column.strokeWidth = 1.5;
      series_bad.columns.template.column.strokeOpacity = 1.0;
      series_bad.columns.template.column.stroke = am4core.color("#ff0000");
      series_bad.columns.template.column.fill = am4core.color("#ff0000");
      series_bad.stacked = true;

    }

    part_names.forEach(function (part_name) {
      createSeries(part_name);
    });

CodePen exemple