Преобразование TextArea формы React-Boostrap в WYSIWYG

Question

Приложение принимает данные в форме React-Boostrap. Формы React- Bootstrap допускают однострочные поля ввода или TextAreas. Обычная текстовая область настроена следующим образом и работает нормально.

import React from "react";
import PropTypes from "prop-types";
import Form from "react-bootstrap/Form";

const Textarea = ({ name, placeholder, value, onChange, onBlur, text }) => {
   return (
      <Form.Group controlId={text.module + name}>
         <Form.Label>{text.label}</Form.Label>
         <Form.Control
            name={name}
            as="textarea"
            rows="10"
            placeholder={placeholder}
            value={value}
            onChange={onChange}
            onBlur={onBlur}
            isInvalid={text.error ? true : false}
         />
         <Form.Control.Feedback type="invalid">
            {text.error}
         </Form.Control.Feedback>
      </Form.Group>
   );
};

Textarea.propTypes = {
   name: PropTypes.string.isRequired,
   placeholder: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   onBlur: PropTypes.func.isRequired,
   text: PropTypes.object.isRequired
};

export default Textarea;

Это черновой js WYSIWYG-код, который я пытался отредактировать, но на самом деле я не понимаю, как это сделать. заставить его работать как TextArea.

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Editor, EditorState } from 'draft-js';
import 'draft-js/dist/Draft.css';

const RichText = ({ name, placeholder, value, onChange, onBlur, text }) => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}

      name={name}
      as='textarea'
      rows='10'
      placeholder={placeholder}
      value={value}
      onChange={onChange}
      onBlur={onBlur}
      isInvalid={text.error ? true : false}
    />
  );
};

RichText.propTypes = {
  name: PropTypes.string.isRequired,
  placeholder: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired,
  onChange: PropTypes.func.isRequired,
  onBlur: PropTypes.func.isRequired,
  text: PropTypes.object.isRequired,
};
export default RichText;

PostForm. js страница выглядит так.

import React from 'react';
import PropTypes from 'prop-types';
import { Form, Button, Container, Row, Col } from 'react-bootstrap';
import Textarea from '../form/Textarea';
import RichText from '../form/Draft';

const PostForm = ({ post, onChange, onBlur, loading, onSubmit }) => {
  const {
    slogan,
    body,
    errors,
  } = post;
  return (
    <Container>
      <Row>
        <Col className='mx-auto'>
          <Form noValidate onSubmit={onSubmit} className='p-sm-3 p-xs-1'>

           <RichText
              name='slogan'
              placeholder='Write your slogan here...'
              value={slogan}
              onChange={onChange}
              onBlur={onBlur}
              text={{
                module: 'post',
                label: 'Slogan',
                error: errors.slogan,
              }}
            />

            <Textarea
              name='body'
              placeholder='Write your post here...'
              value={body}
              onChange={onChange}
              onBlur={onBlur}
              text={{
                module: 'post',
                label: 'Description',
                error: errors.body,
              }}
            />
</Form>
        </Col>
      </Row>
    </Container>
  );
};

PostForm.propTypes = {
  post: PropTypes.object.isRequired,
  loading: PropTypes.bool.isRequired,
  onBlur: PropTypes.func.isRequired,
  onChange: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
};

export default PostForm;