How to render SVG icons in rechart Label

Question

import React from "react";
import { PieChart, Pie, Label } from "recharts";

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

const icon = () => (
  <svg xmlns="http://www.w3.org/2000/svg"  x={200}
  y={210}>
    {Array(5)
      .fill("")
      .map((_, i: any) => (
        <g key={i} fill="red">
          <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
        </g>
      ))}
  </svg>
);

export default function App() {
  return (
    <PieChart width={1000} height={400}>
      <Pie
        dataKey="value"
        isAnimationActive={false}
        data={data}
        cx={200}
        cy={200}
        innerRadius={60}
        outerRadius={80}
        fill="#8884d8"
        label
      >
        {/* <Label value="Label one" position="centerBottom" offset={2} /> */}
        <Label content={icon} />
      </Pie>
    </PieChart>
  );
}

I want to display a star rating at the middle of the pie chart , I rendered 5 SVG icons as Label, but it only rendered as top of others, I want to display those inline as usual rating, If I use div instead of SVG parent and render icons inside it, it does not even display, but can inspect and see the elements, I'm using rechart pie chart here .

sandbox example here

current view of pie chart

Answer 1

only sollution which I can suggest is to make wrapper with position: relative and after make new solid upper the chart

There is a link for the code