How to properly align recharts X axis labels

Question

I'm trying to align my X axis labels to be aligned at start and end of the chart area.
Unfortunately its unaligned at the start:

Here's my full code:

'use client'

import { Area, AreaChart, CartesianGrid, XAxis } from 'recharts'

import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from '@/components/ui/chart'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '../ui/card'

const chartData = [
  { date: new Date('2024-04-02'), transactions: 125 },
  { date: new Date('2024-04-03'), transactions: 143 },
  { date: new Date('2024-04-04'), transactions: 156 },
  { date: new Date('2024-04-05'), transactions: 132 },
  { date: new Date('2024-04-06'), transactions: 168 },
  { date: new Date('2024-04-07'), transactions: 145 },
  { date: new Date('2024-04-08'), transactions: 178 },
  { date: new Date('2024-04-09'), transactions: 189 },
  { date: new Date('2024-04-10'), transactions: 167 },
  { date: new Date('2024-04-11'), transactions: 134 },
  { date: new Date('2024-04-12'), transactions: 156 },
  { date: new Date('2024-04-13'), transactions: 178 },
  { date: new Date('2024-04-14'), transactions: 198 },
  { date: new Date('2024-04-15'), transactions: 167 },
  { date: new Date('2024-04-16'), transactions: 145 },
  { date: new Date('2024-04-17'), transactions: 156 },
  { date: new Date('2024-04-18'), transactions: 189 },
  { date: new Date('2024-04-19'), transactions: 178 },
  { date: new Date('2024-04-20'), transactions: 165 },
  { date: new Date('2024-04-21'), transactions: 145 },
  { date: new Date('2024-04-22'), transactions: 167 },
  { date: new Date('2024-04-23'), transactions: 189 },
  { date: new Date('2024-04-24'), transactions: 176 },
  { date: new Date('2024-04-25'), transactions: 156 },
  { date: new Date('2024-04-26'), transactions: 178 },
  { date: new Date('2024-04-27'), transactions: 189 },
  { date: new Date('2024-04-28'), transactions: 167 },
  { date: new Date('2024-04-29'), transactions: 145 },
  { date: new Date('2024-04-30'), transactions: 178 },
]

const chartConfig = {
  desktop: {
    label: 'Desktop',
    color: 'hsl(var(--chart-1))',
  },
} satisfies ChartConfig

export type AreaCostCollapsibleChartProps = {
  title: string
}

export function AreaCostCollapsibleChart({
  title,
}: AreaCostCollapsibleChartProps) {
  return (
    <Card className="border-none">
      <CardHeader>
        <CardTitle className="text-lg">{title}</CardTitle>
        <CardDescription className="text-sm">
          {chartData[0].date.toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
          })}{' '}
          -{' '}
          {chartData[chartData.length - 1].date.toLocaleDateString('en-US', {
            month: 'short',
            day: 'numeric',
          })}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <ChartContainer config={chartConfig} className="h-[200px] w-full">
          <AreaChart accessibilityLayer data={chartData}>
            <CartesianGrid vertical={false} />
            <XAxis
              dataKey="date"
              tickLine={false}
              axisLine={false}
              interval="equidistantPreserveStart"
              tickMargin={10}
              tickFormatter={(value) =>
                value.toLocaleDateString('en-US', {
                  month: 'short',
                  day: 'numeric',
                })
              }
            />
            <ChartTooltip
              cursor={false}
              content={<ChartTooltipContent indicator="line" />}
            />
            <Area
              dataKey="transactions"
              type="natural"
              fill="var(--color-desktop)"
              fillOpacity={0.1}
              stroke="var(--color-desktop)"
            />
          </AreaChart>
        </ChartContainer>
      </CardContent>
    </Card>
  )
}

I tried using other intervals such as preserveEnd. It kinda works but the space between them is not good.
I also tried padding and margin on AreaChart or XAxis but it still continues to be unaligned at start (just like the image shown above).

And what I'm expecting is that the X axis labels are aligned at start and end of chart and spaced evenly. For example: