Rendering Dynamic HTML in React Froala WYSIWYG is not Working

Question

I'm trying to use the React version of the Froala Editor in my application. Since this will be used in several CRUD operations, I decided to create a component to be used in all my create and update pages.

Everything works great when creating an article, however when I try to fetch a text field from MongoDB in the update pages, the HTML does not gets to render.

As briefly stated above, the string coming from the DB contains html tags:

<h1>Yada-yada-yada</h1>
<p>I'm coming from the MongoDB object</p>

This is my code for the update page:

const [post, setPost] = useState({})
const [postData, setPostData] = useState({
  title: '',
  text: ''
});
const [loading, setLoading] = useState(false);

const {title, text} = postData;

useEffect(() => {
  const fetchPost = (id) => {
    const res = await axios.get(`URL/${id}`);
    setPost(res.data);
    setPostData({
      title: res.data.title,
      text: res.data.text
    });
    setLoading(false);
  }
  fetchPost(router.id)
}, [router.id])

return loading || post === null || post === undefined ? (
  <p>Loading</p>
) : (
  <div>
    <input type="text" value={title} />
    <MyTextArea
      id="text"
      name="text"
      value={text}
      objectData={postData}
      setObjectData={setPostData}
    />
  </div>);

The <MyTextArea /> is the component that I created where the Froala Editor is initialized:

"use client";
import FroalaEditorComponent from "react-froala-wysiwyg";

const MyTextArea = ({
    id = "",
    name = "",
    value = "",
    objectData,
    setObjectData = () => {},
}) => {


    return (
        <div id={id} name={name} className="froala-editor-wrapper">
            <FroalaEditorComponent
                tag="textarea"
                model={value}
                onModelChange={(e) => {
                    setObjectData({
                        ...objectData,
                        text: e,
                    });
                }}
                config={{
                    placeholderText:"Share something new. Now with #hashtags support, YAY!!!",
                }}
            />
        </div>
    );
};

export default MyTextArea;

This is pretty much what I keep getting:

NOTE: I'm using the same component in my create pages and they work great!.