I am trying to use draft js to present a wysiwyg editor.

When I load the component, I am unable to edit anything and the options are coming up vertically.
Expecting it to appear horizontally. What am I doing wrong?

This is how it looks currently.

Implementation.

import React from 'react';
import { EditorState, convertToRaw } from 'draft-js';
import draftToHtml from 'draftjs-to-html';

import dynamic from 'next/dynamic'
import { EditorProps } from 'react-draft-wysiwyg'

const TextEditor = () => {

  // getting window undefined error thus importing this dynamically
  const Editor = dynamic<EditorProps>(
    () => import('react-draft-wysiwyg').then((mod) => mod.Editor),
    { ssr: false }
  )

  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  return (
    <div>
      <Editor
        editorState={editorState}
        wrapperClassName="wrapper"
        editorClassName="editor"
        onEditorStateChange={() => setEditorState(editorState)}
      />
      <textarea
        disabled
        value={draftToHtml(convertToRaw(editorState.getCurrentContent()))}
      />
    </div>
  );
}

export default TextEditor