Cannot add lines or line breaks inbetween list items without messing up the list

[GaddMaster]

When we have a multi layer list, there seems to be no way at adding lines inbetween these lists without messing up the document list ordering. I have tried many the ways shared and none work. It does work in the editor but on render its wrong, these included lines are given ordering.

Steps for Reproduction
Add a multi layer list and try add lines inbetween. If you figure that out, now render it as html on another page as one would normally.
Either use dangerouslySetInnerHTML and a div or ReactQuill & readOnly.

Expected behavior: Able add lines of text inbetween list items

Actual behavior: Gives these lines ordering

Platforms: NextJS

browsers: Firefox, Chrome

Version: react-quill ^2.0.0