Why is quill data when parsed back to raw html, does not replicate the nested bulleting?

Question

this is the input

This is how the quill takes it:

<ol><li>this is a text</li><li>this 2nd line</li><li class="ql-indent-1">this is nested</li><li class="ql-indent-1">this is also nested</li><li class="ql-indent-2">this is further nested</li></ol>

however when I render this data on the screen using

//assuming the data is the quill data <div dangerouslySetInnerHTML={{__html: data}}/>

then what is rendered on the screen is:

1. this is a text
2. this 2nd line
3. this is nested
4. this is also nested
5. this is further nested

one thing I do understand is because html doesn't identify ql-indent-2 and such classes so it does this. Is there anyway in which the nesting can be kept intact? I'm using nextjs as the JavaScript framework.