我在nextjs中使用react-quill和react-hook形式来实现编辑器。

const QuillNoSSRWrapper = dynamic(import('react-quill'), {
  ssr: false,
  loading: () => <p>Loading ...</p>,
});

const Editor = () => {
  const { register, handleSubmit, watch, setValue } = useForm<Content>();

  useEffect(() => {
    if (document) {
      register('content', { required: true });
    }
  }, [register]);

  const onValid = (data: Content) => {
    console.log(data);
  };
  const editorChange = (editorState: string) => {
    setValue('content', editorState);
  };

  const editorContent = watch('content');
  return (
    <div onSubmit={handleSubmit(onValid)}>
      <QuillNoSSRWrapper
        value={editorContent}
        modules={modules}
        formats={formats}
        onChange={editorChange}
      />
      <input type="submit" />
    </div>
  );
};

我尝试添加if(document)...，但出现相同的错误。
因此，我将form更改为div
就像这样

<form>
      <QuillNoSSRWrapper
        value={editorContent}
        modules={modules}
        formats={formats}
        onChange={editorChange}
      />
      <input type="submit" onClick={handleSubmit(onValid)} />
    </form>

data 我输入的是显示在控制台中，但当我刷新我得到同样的错误再次。
如果不使用div，就没有办法使用form标记吗？我正在尝试使用react钩子形式来实现。