Two spans are separated by new line empty line when trying to highlight a searched word

After I highlighted a word that is similar like searched word
we got text divided on spans
For example if we search word “test” in this sentence – This is a test sentence and some dummy text
we have an array with [‘This is a ‘, ‘test’, ‘sentence and some dummy text’]; so we have 3 spans

<span>This is a</span>
<span style=”background-color: yellow”;>test</span>
<span>sentence and some dummy text</span>

I want all those spans to be displayed on one line but I’m getting this view as it seems on this photo

<span>This is a</span>
<span>test</span>
<span>other text</span>

Spans are separated and have a new empty line between these spans
[1]: https://i.stack.imgur.com/faQpR.png

I achieved to highlight searched word by using this method

const regex = new RegExp((${searchedText}), “gi”);
const parts = text?.split(regex);
{parts?.filter(String).map((part, i) => {
return regex.test(part) ? (
<span style={{backgroundColor: ‘yellow’}} key={i}
dangerouslySetInnerHTML={{__html: part}} />
) : (
<span key={i} dangerouslySetInnerHTML={{__html: part}} />
);
})}