如何格式化数据以构建Recharts自定义堆叠柱状图？

我需要将接收的数据进行格式化，用来构建自定义的Recharts堆叠柱状图。要求按group_by字段对数据分组，让每个对应usage_date的X轴节点上，数据呈现堆叠柱状的样式。试了好几种方法都没成功，下面是单个X轴对应的待格式化数据示例，以及我写的React BarChart代码片段，希望能得到帮助。

待格式化数据示例 #

// 单个X轴对应的原始数据示例
[
  {
    "usage_date": "2024-05-01",
    "group_by": "Group1",
    "value": 15
  },
  {
    "usage_date": "2024-05-01",
    "group_by": "Group2",
    "value": 25
  },
  {
    "usage_date": "2024-05-01",
    "group_by": "Group3",
    "value": 20
  }
]

我的BarChart代码片段 #

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

const CustomStackedBarChart = ({ chartData }) => {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={chartData}
        margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="usage_date" />
        <YAxis />
        <Tooltip />
        <Legend />
        {/* 这里需要根据分组动态生成Bar组件，或者匹配格式化后的数据字段 */}
        <Bar dataKey="Group1" stackId="stack" fill="#8884d8" />
        <Bar dataKey="Group2" stackId="stack" fill="#82ca9d" />
        <Bar dataKey="Group3" stackId="stack" fill="#ffc658" />
      </BarChart>
    </ResponsiveContainer>
  );
};

export default CustomStackedBarChart;

内容的提问来源于stack exchange，提问作者user16473744