How can I select multiple snippets of text in a string, and format those selected snippets of text to be bold? I'm working in ReactJS

Question

I’m working in React. I have text in state that is a string. My goal is to turn selections of the text that I select to be bold. Right now, when I select the first section of text, it works. The correct characters in the text become bold.

When I select a second piece of the text, my app crashes or there is an offset issue. So when I select a second piece of my text, my app crashes or the wrong piece of text is selected.

After I make my first selection, I'm no longer working with one long text node. Now, the bold letters are element nodes. So I’m not sure how to find the offset of the beginning and the end of the second selected text since my text node changed from being a long string to individual text nodes, element nodes, and a string.

Here is my project in code sandbox:

https://codesandbox.io/s/stupefied-shockley-0g7ysj?file=/src/App.js:106-155