Converting custom Leafet cluster from Vanilla Js code into React Js code

I’m trying to convert this code http://bl.ocks.org/gisminister/10001728 from Vanilla Js into React Js code. The code is about creating a custom UI for Leaflet clustering using a Pie Chart.

Here is the target.
enter image description here

Problem

I have copied and pasted the code from the blog but the cluster didn’t show as seen in the image below.
enter image description here

Code

Playground: https://codesandbox.io/s/learn-react-leaflet-cnk8tm?file=/src/components/CustomCluster/index.jsx

Steps to Reproduce

  1. Open and run the playground.
  2. Make sure you open the Custom Cluster page by adding /4 to the URL for example https://cnk8tm.csb.app/4 in the playground as seen in the image below.
    enter image description here

Question

I’m not familiar enough with Vanilla Js but I’m familiar enough with React Js.
So what’s wrong with my converted code (in the playground) and what’s the correct one?

Note

Actually, I have already created a custom Leaflet clustering in React Js using leaflet, react-leaflet, and react-leaflet-markercluster libraries here but still had a problem.