editorState.getCurrentContent() is not a function using draft.js

Question

I use the same getHtml() on another text editor in the app and it works fine, but when trying to use it on this page I get the error:

TypeError: editorState.getCurrentContent is not a function

I have tried various related questions on SO, but none have worked for this specific issue.

import React, { useState } from "react";
import classes from "./UpdateModal.module.css";
import "./UpdateModal.css";
import { useBlogCtx } from "../../context/BlogContext";
import {
  EditorState,
  ContentState,
  convertFromHTML,
  convertToRaw,
} from "draft-js";
import "../../../node_modules/draft-js/dist/Draft.css";
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import "./UpdateModal.css";
import "draft-js/dist/Draft.css";
import draftToHtml from "draftjs-to-html";
import { db } from "../../firebase";
import { doc, updateDoc } from "firebase/firestore";

function UpdateModal() {
  const {
    // updatePost,
    setShowUpdateModal,
    updateModalHandler,
    setTitle,
    setImage,
    currentId,
    title,
    image,
    post,
  } = useBlogCtx();

  const [editorState, setEditorState] = useState({
    editorState: EditorState.createWithContent(
      ContentState.createFromBlockArray(convertFromHTML(post))),
  });

  const getHtml = (editorState) =>
  draftToHtml(convertToRaw(editorState.getCurrentContent()));

  const onEditorStateChange = (editorState) => {
    setEditorState({ editorState });
  };

  const updatePost = async (id) => {
    const postDocRef = doc(db, "posts", id);
    // setShowUpdateModal(false);
    await updateDoc(postDocRef, {
      title: title,
      image: image,
      post: getHtml(editorState),
    });
  };

  return (
    <div
      onClick={() => {
        updateModalHandler();
      }}
      className={classes.backdrop}
    >
      <form onClick={(e) => e.stopPropagation()} className={classes.form}>
        <label htmlFor="title">Title</label>
        <input
          id="title"
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
        <label htmlFor="image">Image(URL)</label>
        <input
          id="image"
          type="text"
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
        <label htmlFor="post">Post</label>
        <Editor
          editorState={editorState.editorState}
          onEditorStateChange={onEditorStateChange}
          wrapperClassName="rich-editor demo-wrapper"
          editorClassName="demo-editor"
        />
        <div className={classes.buttons}>
          <button className={classes.cancel} onClick={updateModalHandler}>
            Cancel
          </button>
          <button
            className={classes.update}
            onClick={() => {
              updatePost(currentId);
            }}
          >
            Update
          </button>
        </div>
      </form>
    </div>
  );
}

export default UpdateModal;

Any help will be appreciated.