Creating a cluster map using pie charts as the cluster symbols in React js

[jaballogian]

I'm creating a cluster map using React js framework. I want to show pie charts as cluster symbols.

I found this example from Mapbox map. So now, I'm translating it from plain Javascript into a React js app.

Here is the code (option 1): https://codesandbox.io/s/pie-chart-clustering-1-react-jvfnr?file=/src/App.js

I found this example about using Mapbox map in React app. So I tried to use your code to use Mapbox map in React js app.

Here is the code (option 2): https://codesandbox.io/s/pie-chart-clustering-2-react-0x4u7?file=/src/App.js

But both of the code options couldn't show the pie charts as the cluster symbols. So my question is what's wrong with both of the code options?

Or could anyone give me an example of how to create a cluster map using pie charts as the cluster symbols in React js framework?

Thank you.

Note: I'm hiding the Mapbox access token.