Victory native line and scatter not aligning with x axis

Question

I am using Victory Native to make a multiline chart, along with scatter points.

The chart I have generated

The overall shape seems to be correct, however, I cannot get the points to properly align with the x axis. Also, the date on the x axis for some reason seems to repeat.

Here is the code I am using:

<VictoryChart
    theme={VictoryTheme.material}
    domain={{ y: [0, 14] }}
>

    <VictoryAxis
        fixLabelOverlap
        tickFormat={
            (x) => new Date(x).getDate() + '/' + new Date(x).getMonth() + '/' + new Date(x).getFullYear()
        }
        scale={{ x: 'time' }}
        style={{
            grid: { stroke: 'grey' }, // Set grid line color
        }}
    />
    <VictoryAxis dependentAxis />
    {
        Object.entries(datasets).map(([store_id, dataset]) =>
            <VictoryLine
                key={store_id}
                style={{
                    data: { stroke: storeMap[store_id] ? storeMap[store_id].store_colour : 'red' },
                    parent: { border: "1px solid #ccc" },
                }}
                data={dataset}
            />
        )
    }
    {
        Object.entries(datasets).map(([store_id, dataset]) =>
            <VictoryScatter
                key={store_id}                            
                data={dataset}
            />
        )
    }
</VictoryChart>

The datasets i am using is in this format:

const datasets = {
    "VZ5UkBjAgONxbg1a": [
        { "x": 2023-12-20T18:30:00.000Z, "y": 4 },
        { "x": 2023-12-22T18:30:00.000Z, "y": 10 }
    ], 
    "ZKR97ciViD3XmvVu": [
        {"x": 2023-12-20T18:30:00.000Z, "y": 13},
        {"x": 2023-12-21T18:30:00.000Z, "y": 8},
        {"x": 2023-12-22T18:30:00.000Z, "y": 12}
    ]
}

How do i fix it so that the x axis aligns with the chart, and that the scale does not repeat incorrectly?