Why position 'insideStart' is not working on LabelList in RadialBarChart using Recharts in react?

Question

I am new to Stackoverflow question posting.

Issue: position 'insideStart' on LabelList in RadialBar is not working in react app as expected as per docs on recharts.org

I am showing in the picture what am I getting from the below code.

I tried various options in terms of the position and other props. I read I think most of the posts on LabelList issues and can't get it solved. It seems to me it is issue with the data structure but I do not want to restructure my data for labels. Can someone point me in a right direction how can I solve this issue please. Thank you.

Please note I am junior and new to recharts/coding.

Here is my code index.tsx

import {
  RadialBarChart,
  RadialBar,
  PolarAngleAxis,
  LabelList,
  Tooltip,
} from 'recharts';

export default function Dial(props) {
  const {
    width = 300,
    height = 300,
    data = [],
    dataConfig = {},
    innerRadius = {},
    barSize = 10,
    domain = [0, 2000],
    showLabel = true,
    labelDecimalPlaces = null,
  } = props;

  return (
    <div>
      <RadialBarChart
        width={width}
        height={height}
        cx={width * 0.5}
        cy={height * 0.5}
        innerRadius={innerRadius}
        outerRadius="100%"
        barSize={barSize <= 0 ? 10 : barSize}
        data={data}
        startAngle={90}
        endAngle={-270}
      >
        <PolarAngleAxis type="number" domain={domain} tick={false} />
        <Tooltip />
        {Object.keys(dataConfig).map((key) => {
          return (
            <RadialBar
              key={key}
              dataKey={key}
              fill={dataConfig[key].color}
              background
            >
         
                <LabelList
                  dataKey={key}
                  fill="#000"
                  fontSize={barSize / 2}
                  position="insideStart"
                  formatter={(value) => {
                    if (labelDecimalPlaces === null) {
                      return value;
                    }
                    return value.toFixed(labelDecimalPlaces);
                  }}
                />
              
            </RadialBar>
          );
        })}
      </RadialBarChart>
    </div>
  );
}

Here is my data passed from storybook that has different structure then in all examples on the net. I'm passing values which are required but instead having labels displayed on each and every radial bar I am getting all labels stacked one upon another on the first bar only.

export const MultiData = {
  argTypes: {
    innerRadius: {
      control: {
        type: 'number',
        min: 20,
        max: 100,
      },
      defaultValue: 50,
    },
  },
  args: {
    width: 300,
    height: 300,
    domain: [0, 2000],
    barSize: 10,
    showLabel: true,
    labelDecimalPlaces: 2,

    data: [
      {
        id: 'test0',
        name: 'Test 0',
        a: 1234,
        b: 400.0,
        c: 89.0,
        d: 120.07,
        e: 650.23,
      },
    ],
    dataConfig: {
      a: {
        color: '#8884d8',
      },
      b: {
        color: '#83a6ed',
      },
      c: {
        color: '#82ca9d',
      },
      d: {
        color: '#d0ed57',
      },
      e: {
        color: '#ffc658',
      },
    },
  },
}; 

[This is what I get ][1]


  [1]: https://i.stack.imgur.com/8fkQu.png