How to Display Values Next to Legend in React Pie Chart? Getting ‘Undefined’ Error

I am trying to display value next to legend, but I am getting undefined.
Debugged but no luck, can you let me know how to fix it.

Providing my code snippet and stackblitz below

https://stackblitz.com/edit/react-piechart-padding-complete-8jdttg?file=index.js

status_pie_data: [
  // {"name":"On Arrival","value":0},
  { name: 'Daily', value: 100 },
  { name: 'Weekly', value: 20 },
  { name: 'Monthly', value: 30 },
  { name: 'One Time', value: 50 },
  // {"name":"Active","value":0},
  // {"name":"Completed","value":0}
],

<Legend
            layout="vertical"
            verticalAlign="middle"
            align="right"
            wrapperStyle={{
              fontFamily: 'Lato',
              fontWeight: 400,
              fontColor: '#000',
              fontSize: '9pt',
              marginRight: '0px',
            }}
            formatter={(value, entry, index) => `${entry.name}: ${value}`} // Customize formatter