Estoy tratando de convertir este código http://bl.ocks.org/gisminister/10001728 de Vanilla Js en código React Js . El código se trata de crear una interfaz de usuario personalizada para la agrupación de folletos utilizando un gráfico circular.

Aquí está el objetivo.

Problema

Copié y pegué el código del blog, pero el grupo no se mostró como se ve en la imagen a continuación.

Código

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

Pasos para reproducir

1. Abrir y ejecutar el patio de recreo.
2. Asegúrese de abrir la página de Clúster personalizado agregando /4 a la URL, por ejemplo, https://cnk8tm.csb.app/4 en el área de juegos, como se ve en la imagen a continuación.

Pregunta

No estoy lo suficientemente familiarizado con Vanilla Js pero estoy lo suficientemente familiarizado con React Js. Entonces, ¿qué tiene de malo mi código convertido (en el patio de recreo) y cuál es el correcto?

Nota

En realidad, ya he creado un agrupamiento de folletos personalizado en React Js usando las bibliotecas leaflet , react -leaflet y react-leaflet-markercluster aquí, pero aún tenía un problema.