Having a problem where the text starts at center instead of centered at center.

[ys8672]

Here is a picture for reference.

As you can see, all the text for the bubble charts starts at the middle. The examples I have seen all have text centered at the middle. The code, besides my own data which I passed my own list object in the data parameter, is literally copy + pasted from the example in the README. Also, I did a little debugging and found out this text starting at the middle apparently happened when I put the BubbleChart inside a ReactJS Carousel.Item, but only if the second item onward. But it is also not consistent either. I have no idea what is causing this. If I put it outside a Carousel and other places, the text is centered and it seems almost arbirtrary tbh.

Update #1: I don't know if the problem is on the bubble chart or other components in ReactJS, but when I do a componentDidMount set to true and do not load the chart dynamically, the chart text is centered correctly. When I remove that, the chart text starts at middle. Not sure why it does that.