I am new to ReactJs. I have treid many ways and solutions to show default value in text editor. But i did not find a suitable answer to it. Below piece of code is what i tried. But i do not get the editor prefilled with database value.

I want MUIRichTextEditor to show the default value in it.

Following is MUIRichTextEditor

<MUIRichTextEditor
      name="text"
      label="Start Tying...."
      toolbarButtonSize="small"
      defaultValue={this.state.text}
      inlineToolbar={true}
      onChange={this.onChange}
/>

Below is how my Editor looks like :

this.onChange

onChange = textData => {
    if (textData.getCurrentContent().getPlainText()) {
        this.setState({
            text: stateToHTML(textData.getCurrentContent()),
        })
    } else {
        this.setState({
            text: "",
        })
    }
};

Have imported the following:

import MUIRichTextEditor from "mui-rte";
import { stateToHTML } from "draft-js-export-html";

How is send my data to edit:

<EditForm 
    onSubmit={this.updateData}
    initialValues={this.state.databaseData}
/>

text gets sent to the edit form, but, the default value is not getting displayed

Data in database is:

{"_id":{"$oid":"61dbc710888107116046198e"},"text":"<p>Text<strong>feild</strong></p>""__v":0}

So, when I edit my text at the front end, I want MUIRichTextEditor to be prefilled with text. Since in database it is saved as html, at the front end as well, in text editor, I want to be displayed in proper format. I do not want to use hooks. Just in ReactJs.

Expected Result when I want to edit (Example):

I don't know how to do it. Help would be greatly appreciated. Thankyou.