I want to use textarea for input instead of using normal input text type in my draft-js on a NextJS project. I have tried all I can but can and I'm still not getting it and I also want each of the toolbars to be separated with a border-left style.

This is what I want to achieve in this picture

enter image description here

And this is what I have done

enter image description here

And here is my code on what I have tried

import React, { useState } from 'react';
import { EditorState, ContentState, Modifier, SelectionState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

function MyEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [textAreaValue, setTextAreaValue] = useState('');

  const onEditorStateChange = (newEditorState) => {
    setEditorState(newEditorState);
    const text = newEditorState.getCurrentContent().getPlainText();
    setTextAreaValue(text);
  };

  const handleTextAreaChange = (event) => {
    const text = event.target.value;
    setTextAreaValue(text);

    const contentState = editorState.getCurrentContent();
    const selection = new SelectionState({
      anchorKey: contentState.getFirstBlock().getKey(),
      anchorOffset: 0,
      focusKey: contentState.getLastBlock().getKey(),
      focusOffset: contentState.getLastBlock().getText().length,
    });

    const newContentState = Modifier.replaceText(
      contentState,
      selection,
      text
    );

    setEditorState(EditorState.push(editorState, newContentState, 'replace-text'));
  };

  return (
    <div className="w-[70%] border">
      <div className="hide-rdw-editor">
        <Editor
          editorState={editorState}//disable this lime for me and use my textarea input
          onEditorStateChange={onEditorStateChange} //disable this lime for me and use my textarea input
          toolbar={{
            options: ['inline', 'textAlign', 'list', 'fontFamily'],
            inline: {
              options: ['bold', 'itimport React, { useState } from 'react';
import { EditorState, ContentState, Modifier, SelectionState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

function MyEditor() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());
  const [textAreaValue, setTextAreaValue] = useState('');

  const handleTextAreaChange = (event) => {
    const text = event.target.value;
    setTextAreaValue(text);

    const contentState = editorState.getCurrentContent();
    const selection = new SelectionState({
      anchorKey: contentState.getFirstBlock().getKey(),
      anchorOffset: 0,
      focusKey: contentState.getLastBlock().getKey(),
      focusOffset: contentState.getLastBlock().getText().length,
    });

    const newContentState = Modifier.replaceText(
      contentState,
      selection,
      text
    );

    setEditorState(EditorState.push(editorState, newContentState, 'replace-text'));
  };

  return (
    <div className="w-[70%] border">
      <div className="hide-rdw-editor">
        <Editor
          toolbar={{
            options: ['inline', 'textAlign', 'list', 'fontFamily'],
            inline: {
              options: ['bold', 'italic', 'underline'],
            },
            textAlign: {
              options: ['left', 'center', 'right'],
            },
            list: {
              options: ['unordered', 'ordered'],
            },
          }}
        />
      </div>
      <textarea
        value={textAreaValue}
        onChange={handleTextAreaChange}
        className="w-full h-64 border p-2"
      />
    </div>
  );
}

export default MyEditor;alic', 'underline'],
            },
            textAlign: {
              options: ['left', 'center', 'right'],
            },
            list: {
              options: ['unordered', 'ordered'],
            },
          }}
        />
      </div>
      <textarea
        value={textAreaValue}
        onChange={handleTextAreaChange}
        className="w-full h-64 border p-2"
      />
    </div>
  );
}

export default MyEditor;