Highchart Pie Chart, De-structure Datalabels And Define Custom Formatter

I am using Highchart in a react application. I am defining pie configs in a config file and it is used in a component. The component is responsible for rendering highchart by using

Solution 1:

Notice that Highcharts callbacks don't accept the JSX components. Take a look at this example if you want to use the JSX components in Highcharts - https://gist.github.com/jon-a-nygaard/7d0253b2c73ae634d5804d6794a67c0c

Example without using the JSX: https://codesandbox.io/s/highcharts-react-demo-forked-z13sh