I can't get react-draft-wysiwyg to work properly with Next.js

I am planning to implement react-draft-wysiwyg with Next.js based on the following page.

[Rich text editor that runs in the browser, easily implemented using React Draft Wysiwyg][1] [1]: https://harionote.net/2022/01/07/%E3%80%90react-draft-wysiwyg%E3%80%91%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E4%B8%8A%E3%81%A7%E5%8B%95%E3%81%8F%E3%83%AA%E3%83%83%E3%83%81%E3%81%AA%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%82%A8%E3%83%87/

What we want to achieve

I want to run react-draft-wysiwyg and receive input with const [editorState, setEditorState] = useState("");

Problem/error message you are encountering

It's not an error, but for some reason. I want to write const [editorState, setEditorState] = useState(""); and then use const [editorState, setEditorState] = useState("");. and then write <Editor editorState={editorState} ~ omitted~

to prevent filling in the production environment and the local environment. (You can verify this with vercel.) I would like to implement this usestate because without it I cannot receive values, but I have not yet found the cause. I would like to know if anyone knows what is going on. Thank you in advance.

https://sample-file.vercel.app/

github https://github.com/takoyan33/sample-file

Source code in question

JavaScript

import React, { useCallback, useContext, useEffect, useState } from "react";
import dynamic from "next/dynamic";

const Editor = dynamic(
  () => import("react-draft-wysiwyg").then((mod) => mod.Editor),
  { ssr: false }
);

import { ContentState, convertToRaw, EditorState } from "draft-js";

import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

export default function Home() {
  const [editorState, setEditorState] = useState("");

  const handleImageUpload = useCallback(async (file) => {
    return await axios
      .post
      // fileをアップロードし、アップロード後の画像のurlを返す処理
      ()
      .then((response) => {
        return { data: { link: response } };
      })
      .catch((error) => {
        return error;
      });
  }, []);

  console.log(editorState);

  return (
    <div className="container my-5">
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorStyle={{
          border: "solid 1px lightgray",
          padding: "5px",
        }}
        localization={{ locale: "ja" }}
      />
    </div>
  );
}
```