Repository: ui
Issue: [bug]: Chart Legend Each child in a list should have a unique "key" prop.
Labels: bug

### Describe the bug

```
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  ChartConfig,
  ChartLegend,
  ChartLegendContent
} from "@/components/ui/chart";
import {
  PolarAngleAxis,
  PolarGrid,
  RadialBar,
  RadialBarChart,
  ResponsiveContainer,
} from "recharts";
import { Tractor, GraduationCap, Trees, Stethoscope, Home, Building2, HelpCircle, Factory, Droplets, Train } from 'lucide-react';

const data = [
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Transport",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.17,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Commercial",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.04,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Parkland",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 0.05,
  },
  {
    SAL_CODE_2021: 13615,
    MB_CATEGORY_2021: "Residential",
    SAL_NAME_2021: "South Wentworthville",
    AREA_SQM: 1.55,
  },
];

const categoryIcons = {
  "Primary Production": Tractor,
  Education: GraduationCap,
  Parkland: Trees,
  "Hospital/Medical": Stethoscope,
  Residential: Home,
  Commercial: Building2,
  Other: HelpCircle,
  Industrial: Factory,
  Water: Droplets,
  Transport: Train,
};

const muted_colors = [
  "hsl(var(--chart-1))",
  "hsl(var(--chart-2))",
  "hsl(var(--chart-3))",
  "hsl(var(--chart-4))",
  "hsl(var(--chart-5))",
];

export default function AreaBreakdown() {
  const totalArea = data.reduce((sum, item) => sum + item.AREA_SQM, 0);
  const chartData = data.map((item, index) => ({
    category: item.MB_CATEGORY_2021,
    SQM: item.AREA_SQM,
    fill: muted_colors[index % muted_colors.length],
    icon:
      categoryIcons[item.MB_CATEGORY_2021 as keyof typeof categoryIcons] ||
      HelpCircle,
  }));

  const chartConfig: ChartConfig = {
    ...Object.fromEntries(
      data.map((item, index) => [
        item.MB_CATEGORY_2021,
        {
          label: item.MB_CATEGORY_2021,
          color: muted_colors[index % muted_colors.length],
          value: item.AREA_SQM,
        }
      ])
    )
  };

  return (
    <div className="w-full max-w-4xl mx-auto p-4 space-y-4">
      <Card className="w-full">
        <CardHeader>
          <CardTitle>Area Breakdown - {data[0].SAL_NAME_2021}</CardTitle>
        </CardHeader>
        <CardContent className="pt-6">
          <ChartContainer
            config={chartConfig}
            className="h-[400px]"
          >
            <ResponsiveContainer width="100%" height="100%">
              <RadialBarChart
                innerRadius="10%"
                outerRadius="80%"
                data={chartData}
                startAngle={90}
                endAngle={-180}
              >
                <PolarGrid gridType="circle" />
                <PolarAngleAxis
                  type="number"
                  domain={[0, "auto"]}
                  tick={false}
                />
                <RadialBar
                  label={{ 
                    position: "end", 
                    // fill: "#888", 
                    fontSize: 12,
                    formatter: (value: number) => `${value.toFixed(2)} sqm`
                  }}
                  cornerRadius={25}
                  dataKey="SQM"
                />
                <ChartLegend content={<ChartLegendContent nameKey="category" />} />
                <ChartTooltip 
                  content={<ChartTooltipContent labelKey="SQM" nameKey="category"/>}
                />
              </RadialBarChart>
            </ResponsiveContainer>
          </ChartContainer>
        </CardContent>
      </Card>
    </div>
  );
}
```

![image](https://github.com/user-attachments/assets/e68ce474-1bfe-42c6-bd45-25c785c72d68)


### Affected component/components

charts

### How to reproduce

<ChartLegend content={<ChartLegendContent nameKey="category" />} />

### Codesandbox/StackBlitz link

_No response_

### Logs

_No response_

### System Info

```bash
Nextjs15+React19
Windows
```


### Before submitting

- [X] I've made research efforts and searched the documentation
- [X] I've searched for existing issues