如何使用Recharts在X轴上显示4年内月份数字的刻度和标签

import React from 'react';
import { LineChart, XAxis, YAxis, CartesianGrid, Line } from 'recharts';

const data = [
  { date: new Date(2018, 0), value: 100 },
  { date: new Date(2018, 1), value: 200 },
  // ...
  { date: new Date(2021, 10), value: 300 },
];

const Chart = () => {
  return (
    <LineChart width={600} height={300} data={data}>
      <XAxis dataKey="date" tickFormatter={(date) => date.getMonth() + 1} />
      <YAxis dataKey="value" />
      <CartesianGrid stroke="#ccc" />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};

const App = () => {
  return (
    <div>
      <h1>My Chart</h1>
      <Chart />
    </div>
  );
};