Carousel works perfectly, but not inside a modal

[Novizh]

Hello @YIZHUANG, I've been using this carousel for my entire project and it works fine.
However, there's a new feature that requires me to display the carousel inside a modal.

Prerequisites
react-multi-carousel with Custom Dots
Bootstrap

Describe the bug
Let's say it's a product details page, which already has react-multi-carousel working perfectly fine, the a modal will open if an image is being clicked, which will render the exact same carousel only with bigger images inside the carousel.

To Reproduce
Steps to reproduce the behavior:

1. Copy and paste a perfectly working react-multi-carousel code, into a modal component, and render it in the same page.
2. Add functionality to open said modal
3. Wait for the modal to open

Expected behavior
The modal is opened and the exact same carousel is rendered both inside the modal and behind the backdrop

Screenshots
Instead I got this empty carousel

Here's what's inside the element

Please advise, been working this issue for hours

Reproduction
You can try this case on this sandbox
https://codesandbox.io/p/sandbox/twilight-lake-skdwtn

[VigilioYonatan]

any solution?