Use date on x-axis but id to set domain using recharts - reactjs

Question

I want to set the domain for the giving data set. So you can only see 5 objects at once. When doing this using ids it works well. However the x-axis uses dates. Is there a way to decouple the x-axis labels from the domain?
const initialData = [
{ id: 1, date: "05/16/2022", value: 4456 },
{ id: 2, date: "05/17/2022", value: 2789 },
{ id: 3, date: "05/18/2022", value: 7891 },
{ id: 4, date: "05/19/2022", value: 4561 },
{ id: 5, date: "05/20/2022", value: 5561 },
{ id: 6, date: "05/21/2022", value: 6561 },
{ id: 7, date: "05/22/2022", value: 4561 },
{ id: 8, date: "05/23/2022", value: 4561 },
{ id: 9, date: "05/24/2022", value: 4861 },
{ id: 10, date: "05/25/2022", value: 8561 },
{ id: 11, date: "05/26/2022", value: 6561 },
{ id: 12, date: "05/27/2022", value: 4561 }
];
const initialState = {
data: initialData,
left: initialData[0].date,
right: initialData[5].date,
refAreaLeft: undefined,
refAreaRight: undefined,
top: "dataMax+1000",
bottom: "dataMin-1000",
animation: true
};
<ResponsiveContainer width="100%" height={400}>
<LineChart
width={800}
height={400}
data={data}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis
allowDataOverflow
dataKey="date"
domain={[left, right]}
type="category"
/>
<YAxis allowDataOverflow domain={[bottom, top]} type="number" />
<Tooltip />
<Line
type="natural"
dataKey="value"
stroke="#8884d8"
animationDuration={300}
/>
</LineChart>
</ResponsiveContainer>