using react-draft-wysiwyg converted to html

Question

I am using react WYSIWYG for the first time in a custom email template. i need to draft template messages that will be sent as email body. from WYSIWYG editor, i can achive this. during the extraction of html from draft-js, i am unable to return jsx or html that will be rendered as body when the email is sent. before i send the email itself, i first tried rendering the value extracted from the editor, but istead, it renders stringified html, when i try using draft to markdown, this work but html formatting is lost, which is also what am not looking for. below is my code

import React, { useState } from "react";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertToRaw } from "draft-js";
import "../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import "./editor.css";
import draftToHtml from "draftjs-to-html";
import draftToMarkdown from 'draftjs-to-markdown';

const EditorBook = () => {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const text = draftToHtml(convertToRaw(editorState.getCurrentContent()))

  return (
    <div>
      <Editor
        editorState={editorState}
        editorClassName="editor-class"
        onEditorStateChange={setEditorState}
        placeholder="enter text reminders ..."
        mention={{
          separator: " ",
          trigger: "@",
          suggestions: [
            { text: "APPLE", value: "apple", url: "apple" },
            { text: "BANANA", value: "banana", url: "banana" },
            { text: "CHERRY", value: "cherry", url: "cherry" },
            { text: "DURIAN", value: "durian", url: "durian" },
            { text: "EGGFRUIT", value: "eggfruit", url: "eggfruit" },
            { text: "FIG", value: "fig", url: "fig" },
            { text: "GRAPEFRUIT", value: "grapefruit", url: "grapefruit" },
            { text: "HONEYDEW", value: 'honeydew', url: "honeydew" },
          ],
        }}
      />
      <button
        onClick={() =>
          console.log(
            draftToHtml(convertToRaw(editorState.getCurrentContent()))
          )
        }
      >
        console.log me
      </button>
      <div>
        {text}        
      </div>
    </div>
  );
};

export default EditorBook;

when console loged, this is what appears to the console:

<p>here is sample text</p>

now this same text, is what is displayed to the frontend "as a string" yet i just want the text only to be displayed like so:

const text = draftToHtml(convertToRaw(editorState.getCurrentContent()))

when i do this in the react JSX,

<div>
  {text}        
</div>

i get this in the browser:

here is sample text

when i use the "draftToMarkdown" i get what i want, but formating is lost like this:

const honey = draftToMarkdown(convertToRaw(editorState.getCurrentContent()))

when console logged

<p>this is a sample text</p>
<p>hello every one. (this statement should be on the second line)</p>

result on the browser: this is a sample text hello every one. (this statement should be on the second line)

I understand the the

is an inline block element but i want it in a way that when the keyboard 'Enter' is press, and some text followed, it should appear as a newline in the browser. how can i achieve this ?