How to display parsed markdown content entered in a div

Question

I have a div where the user enters the markdown content. The idea is to parse it and show the content in that div only. I'm using the marked package to do so. I had to use a div, because input and textarea don't allow dangerouslySetInnerHTML. So this is what my code looks like:

const [content, setContent] = useState("");

const handleInput = (e) => {
   setContent(e.target.textContent);
};

const renderMarkdown = () => {
   return { __html: marked.parse(content) };
};

<div
    contentEditable="true"
    className={styles.editor}
    onInput={handleInput}
    dangerouslySetInnerHTML={renderMarkdown()}
></div>

When I type markdown content into the div, the content is messed up. Eg - # title becomes # eltit. Why is this happening and how can I fix it?