Apexcharts curve smooth causes “time warp” (type datetime)

I use Apexcharts to generate this chart. The x axis is of type datetime. The data points are correct, however, when I set the stroke curve: "smooth", the chart gets this weird time warp where it goes “back in time” with the line even though my data is in chronological order. Why is that?

I use next.js and react-apexcharts:

let state = {
    options: {
        chart: {
            height: 250,
            toolbar: {
                show: true,
                offsetX: 0,
                offsetY: 0,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false,
                    customIcons: [],
                },
            },
        },
        xaxis: {
            type: 'datetime',
            min: moment(moment(startDate).format("YYYY-MM-DD") + " " + settings.wake_up_time).unix() * 1000,
            max: moment(moment(endDate).format("YYYY-MM-DD") + " " + settings.bed_time).unix() * 1000,
            labels: {
                datetimeFormatter: {
                    year: 'YYYY',
                    month: 'MMM 'yy',
                    day: 'ddd',
                    hour: 'HH:mm'
                },
                style: {
                    colors: 'hsl(var(--muted-foreground))',
                },
                datetimeUTC: false, // Do not convert to UTC
            },
        },
        yaxis: {
            labels: {
                formatter: function (val) {
                    return val.toFixed(0);
                },
                style: {
                    colors: 'hsl(var(--muted-foreground))',
                },

            },
            tickAmount: 5, // only 6 labels
            min: 0,
            max: 10
        },
        noData: {
            text: "No data yet...",
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            curve: 'smooth',
        },
        colors: ['hsl(var(--accent))'],
        tooltip: {
            theme: settings.theme === 0 ? "dark" : "light",
            x: {
                show: true,
                format: 'dd.MM.yy HH:mm',
            },
            y: {
                formatter: function (val) {
                    return val.toFixed(1)
                },
            },
            z: {
                title: "Activities:",
            }
        },
        grid: {
            borderColor: 'hsl(var(--border))',
        }
    },
    series: [{
        name: 'Energylevel',
        data: data,
    }],
    type: "area",
}

return (
    <Chart options={state.options} series={state.series} type={state.type} height={320} width="100%" />
)

data:

[
    {
        "x": "2024-01-05 08:15",
        "y": 8,
        "z": ""
    },
    {
        "x": "2024-01-05 09:00",
        "y": 5,
        "z": ""
    },
    {
        "x": "2024-01-05 09:30",
        "y": 7.5,
        "z": ""
    },
    {
        "x": "2024-01-05 10:00",
        "y": 6.5,
        "z": ""
    },
    {
        "x": "2024-01-05 10:30",
        "y": 7,
        "z": ""
    },
    {
        "x": "2024-01-05 12:00",
        "y": 4.5,
        "z": ""
    }
]