The text area goes out of focus after a single character is typed

Whenever I type a single character, the text area goes out of focus or is deselected rather, and I have to click in the text area once again to type yet another character and the cycle continues.

This is my state of the class component where my editor resides in.

state = {
    imageUrl: "",
    title: "",
    excerpt: "",
    body: "",
    submitMessage: "",
    submitMessageTextColor: "",
  };

This is my handler function:

onBodyChange = (value) => {
    this.setState({
      body: value,
    });
  };

This is my MDE component call:

<SimpleMDE onChange={this.onBodyChange} options={{hideIcons: ["preview", "side-by-side", "fullscreen"], }} />

[RIP21]

As per README.md

Note that you need to useMemo to memoize options so they do not change on each rerender! It will affect behavior and performance because then on each render of the parent that renders SimpleMdeReact you’ll get a new instance of the editor, which you definitely want to avoid! Also, if you change options on each value change you will lose focus. So, put options as a const outside of the component, or if options shall be partially or fully set by props make sure to useMemo in case of functional/hooks components, or class field for class based components. Slightly more on that here: #164

[RIP21]

I’m so sorry, but I am new to React as a technology, could you please guide me further by helping me with what you mean when you say "into a class field"?

It’s not React, but JS. Read online what’s class field declaration in JS is.

Use react hooks API instead. React class components are deprecated much and nobody writes them anymore.