How can I configure a Recharts X-axis to display age values in the format '⩽17', '20', '25', '30', and so on,

Question

I'm working on a project where I'm using Recharts to create a bar chart to display data related to different age groups. I want the X-axis to show the age values in a specific format. For ages less than or equal to 17, I'd like it to display '⩽17'. Then, I want the X-axis labels to continue with '20', '25', '30', '35', and so on, without skipping any values in between. The pattern should continue until we reach '⩽91' and '⩾91'. How can I achieve this using Recharts?

This is the code I have done

const data = [
  { age: 17, percentage: 40, distributed: 120 },
  { age: 19, percentage: 45, distributed: 120 },
  // Add more data here
  { age: 91, percentage: 36, distributed: 464 },
];


const CustomXAxisTick = ({ x, y, payload }) => (
  <g transform={`translate(${x},${y})`}>
    <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
      {payload.value}
    </text>
  </g>
);

const App = () => (
  <ResponsiveContainer width="100%" height={300}>
    <BarChart data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="ageLabel" interval={0} tick={<CustomXAxisTick />} />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="percentage" fill="#8884d8" />
    </BarChart>
  </ResponsiveContainer>
);

Problem is I can display the <=17 but after that it is showing 22 then 27 and so on