Javascript 无法将useState输出到导入的图表

我有一个简单的表单，其中我将添加一个任务并添加该任务所花费的分钟数，我在尝试获取从“Recharts”导入的图表以查看状态时遇到问题，看起来状态返回空数组，而我的图表没有看到数据

Recharts图表采用一个数组，其中一个对象包含两个值，示例如下所示

const data = [
    { name: "Group A", data: 400 },
    { name: "Group B", data: 300 },
    { name: "Group C", data: 300 },
    { name: "Group D", data: 200 },
    { name: "Group E", data: 278 },
    { name: "Test Data", data: 189 }
  ];

但是，当我将状态作为道具移动到组件并将结果映射为与输入相同的名称后，图表不会显示任何内容 （我的地图道具）

我在codesandbox上放了一个简化版本，如果有人想看到我得到的输出，我会让它变得更简单

---

在我发布此消息时发现问题，我在道具中映射的“数据”值将作为字符串输出，而对象需要一个数字

const activityData = [
    ...props.pieData.map(el => ({
      name: el.title,
      data: el.amount
    }))
  ];