如何在单词之间留有空格的自定义recharts图例

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

const CustomLegend = () => {
  const data = [
    { name: 'Apple', value: 400 },
    { name: 'Banana', value: 300 },
    { name: 'Cherry', value: 200 },
  ];

  return (
    <Legend
      content={() => (
        <React.Fragment>
          {data.map((entry, index) => (
            <React.Fragment key={`item-${index}`}>
              <Legend.Item
                key={`item-${index}`}
                color={entry.color}
                value={`${entry.name} `}
              />
              {index !== data.length - 1 && ' '}
            </React.Fragment>
          ))}
        </React.Fragment>
      )}
    />
  );
};

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

export default Chart;