Dates are not being shown correctly for ChartCategoryAxisItem

const data = [
  {
    date: '2021-08-02T00:00:00+00:00',
    score: 631,
  },
  {
    date: '2021-08-09T00:00:00+00:00',
    score: 624.25,
  },
  {
    date: '2021-08-23T00:00:00+00:00',
    score: 596.6,
  },
  {
    date: '2021-09-13T00:00:00+00:00',
    score: 505.666656,
  },
  {
    date: '2021-09-27T00:00:00+00:00',
    score: 417,
  },
  {
    date: '2021-10-04T00:00:00+00:00',
    score: 485.666656,
  },
  {
    date: '2021-10-18T00:00:00+00:00',
    score: 548,
  },
];

const ChartContainer = () => (
  <Chart>
    <ChartCategoryAxis>
      <ChartCategoryAxisItem
        majorGridLines={{ visible: false }}
        justified={true}
        categories={data.map((d) => d.date)}
        labels={{ rotation: 'auto', step: data.length - 1 }}
        type="date"
      />
    </ChartCategoryAxis>
    <ChartValueAxis>
      <ChartValueAxisItem
        majorGridLines={{
          visible: false,
        }}
        title={{
          text: 'Scaled Score',
        }}
      />
    </ChartValueAxis>

    <ChartSeries>
      <ChartSeriesItem
        type="line"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
      />
      <ChartSeriesItem
        type="area"
        data={data.map((d) => d.score)}
        missingValues="interpolate"
        color="rgb(214 237 247)"
      />
    </ChartSeries>
  </Chart>
);