Getting incorrect output when I try to render HTML in react

I am currently developing a chat application. In the application i am taking input using ReactQuill wysiwyg editor.

I am taking input from the editor which is a string that has html for example :

Output-> I want to render the output again in html to a chatbox inside a 'div'.

My research ->

1. We can use dangerouslySetInnerHTML to render the html.
2. We can use a library called react-highlight
3. We can use parse function from "html-react-parser" library eg : parse(html)

I have tried all the above methods but i am getting this same output for all the above methods.

I would like to get the exact output which i wrote in the editor but as you can see the numbered list is not showing and only plain text is being shown.

I am new to web development so please excuse me if I made some error or I asked the question in a wrong way.I have also attached the code snippet of the application below

import React from "react";

const Message = (props) => {
  function CreateElement() {
    return <div dangerouslySetInnerHTML={{ __html: props.msg.text }}></div>;
  }
  return (
    <div
      id={props.msg.idx}
      className={`flex ${
        props.user.toLowerCase() !== props.msg.user
          ? "justify-start"
          : "justify-end"
      }`}
    >
      <div
        class={`relative max-w-xl px-4 py-2 ${
          props.user.toLowerCase() !== props.msg.user
            ? "bg-gray-700 text-white border-2 border-gray-400"
            : "text-gray-700 border-2 border-gray-800"
        } rounded shadow-md `}
      >
        {CreateElement()}
      </div>
    </div>
  );
};

export default Message;

EDIT 1: HTML STRUCTURE: