Trouble formatting bold/italic/underline text with capture group regex

I'm having trouble using `reactStringReplace` to format text with bold/italic tags. I have it set up as follows:

```javascript
var text1 = "[b]Testing bold [i]and italic[/i] tags[/b]"
var text2 = "[b]Testing bold [i]and italic tags[/b][/i]"

let replaced = reactStringReplace(text1, /\[b\]([\s\S]+)\[\/b\]/g, (match, i) => {
return {match}
})
replaced = reactStringReplace(replaced, /\[i\]([\s\S]+)\[\/i\]/g, (match, i) => {
return {match}
})

// result (html)
Testing [i]bold and italic[/i] tags
Testing [i]bold and italic tags[/i]
```

I'm not sure if this is a problem with `reactStringReplace`, with the regex I'm using, or something else. If I apply the italic replace first, I get italic tags where I'd expect them to be, but the [b] tags remain unchanged. Is this use case possible using `reactStringReplace` or do I need to use `dangerouslySetInnerHtml`?

Bonus: is `reactStringReplace` capable of handling unbalanced tags, or improperly formatted tags as in `text2` or should I be doing some pre-processing to ensure the strings are properly balanced and formatted?