Cursor cannot focus in certain areas within a contentEditable element

When inserting an HTML tag with styles into a contentEditable element, in some cases, the cursor cannot focus behind the inserted tag。 The specific steps are as follows：

1. Insert some characters.
2. Insert a tag.
3. Press enter.
4. Insert more characters.
   enter image description here

However, if I skip the first step, the cursor can focus normally behind the tag
enter image description here

Why does this happen? How can I make the cursor position itself behind the tag and continue typing in the first case?

https://codesandbox.io/p/sandbox/elastic-nova-72hmw4?file=%2Fsrc%2FApp.js%3A65%2C32-65%2C54

Is it possible to position the cursor as expected？