React Recharts -如何根据时间对X轴进行排序？

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

const data = [
  { time: '2022-01-01', value: 100 },
  { time: '2022-01-02', value: 200 },
  { time: '2022-01-03', value: 150 },
  // 更多数据...
];

// 对数据按时间字段进行排序
data.sort((a, b) => new Date(a.time) - new Date(b.time));

const Chart = () => {
  return (
    <LineChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="time" type="number" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="value" stroke="#8884d8" />
    </LineChart>
  );
};

export default Chart;