I found a decent solution. The downside is that it stops the scroll completely after exiting the carousel. Meaning, it does not take into account any momentum from the mouse velocity; it just stops immediately. However, in my opinion, it's a style choice rather than a downside.

By using style={{ overflowX: "auto", scrollSnapType: 'none' }} in the carousel div and style={{ scrollSnapAlign: 'none' }} for each carousel item, I was able to 'solve' the multiple carousel bug.