javascript - 编辑器 Div 出现两次

Question

editorjs div 保存后出现两次，如果我包含 useEffect 挂钩，则 div 出现多次第一次保存代码后，editorjs div 仅出现一次，但如果我进行一些更改，则 div 出现两次，如果我取消注释useEffect 部分设置 formData div 出现的次数更多。我想知道为什么div出现多次导致变化的原因，我应该如何解决这个问题并在formData中设置数据？

import React, { useState, useEffect } from "react";
import EditorJS from "@editorjs/editorjs";
import Header from "@editorjs/header";
import List from "@editorjs/list";
import ImageTool from "@editorjs/image";

function Blog() {
  const editor = new EditorJS({
    holder: "editorjs",
    placeholder: "Let`s write an awesome story!",
    tools: {
      header: {
        class: Header,
        config: {
          placeholder: "Enter a header",
          levels: [1, 2, 3, 4, 5, 6],
          defaultLevel: 2,
        },
      },
      list: {
        class: List,
        inlineToolbar: true,
      },
    },
  });
  const [values, setValues] = useState({
    name: "",
    photo: "",
    content: [],
    formData: "",
    error: "",
    save: false,
    published: false,
  });

  let { name, photo, content, formData, error, save, published } = values;

  
  const preload = () => {
    setValues({ ...values, formData: new FormData() });
  };

  useEffect(() => {
    preload();
  }, []);

  const handleChange = (name) => (event) => {
    const value = name === "photo" ? event.target.files[0] : event.target.value;
    formData.set(name, value);
    setValues({ ...values, [name]: value });
  };

  const upperPart = () => {
    return (
      <div>
        <h1>New Blog</h1>
        <div>
          <label>Heading</label>
          <input
            id="name"
            className="form-control"
            placeholder="Name"
            onChange={handleChange("name")}
          />
        </div>
        <input
          type="file"
          name="photo"
          accept="image"
          placeholder="choose a file"
          onChange={handleChange("photo")}
        />
      </div>
    );
  };

  const onSave = async () => {
    const val = await editor
      .save()
      .then((outputData) => {
        return outputData;
      })
      .catch((error) => {
        console.log("Saving failed: ", error);
      });
    console.log(val);
  };

  return (
    <div className="App">
      {upperPart()}
      <div>
        <div id="editorjs"></div>
      </div>
      <button onClick={onSave}>SUBMIT</button>
    </div>
  );
}
export default Blog;