如何在rechart中添加自定义图例？

import React from "react";
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Legend } from "recharts";

// 自定义图例组件
const CustomLegend = ({ payload }) => (
  <div>
    <h3>自定义图例</h3>
    {payload.map((entry, index) => (
      <div key={`item-${index}`}>
        <span style={{ backgroundColor: entry.color }}></span>
        <span>{entry.value}</span>
      </div>
    ))}
  </div>
);

const data = [
  { name: "A", uv: 100, pv: 2400 },
  { name: "B", uv: 200, pv: 1398 },
  { name: "C", uv: 300, pv: 9800 },
  { name: "D", uv: 400, pv: 3908 },
];

const App = () => (
  <BarChart width={600} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Legend content={<CustomLegend />} /> // 添加自定义图例组件
    <Bar dataKey="uv" fill="#8884d8" />
    <Bar dataKey="pv" fill="#82ca9d" />
  </BarChart>
);

export default App;