我正在尝试让wordpress块编辑器加载到一个react项目：https://www.npmjs.com/package/@wordpress/block-editor .
我已经完全按照npm页面上的例子设置了它，但是它给出了一个无效的钩子错误。我想也许是因为错误建议的版本不匹配？
这是密码：

import {
  BlockEditorProvider,
  BlockList,
  WritingFlow,
  ObserveTyping
} from "@wordpress/block-editor";
import { SlotFillProvider, Popover } from "@wordpress/components";
import { useState } from "@wordpress/element";
import "@wordpress/components/build-style/style.css";
import "@wordpress/block-editor/build-style/style.css";

export default function MyEditorComponent() {
  const [blocks, updateBlocks] = useState([]);

  return (
    <BlockEditorProvider
      value={blocks}
      onInput={(blocks) => updateBlocks(blocks)}
      onChange={(blocks) => updateBlocks(blocks)}
    >
      <SlotFillProvider>
        <Popover.Slot name="block-toolbar" />
        <WritingFlow>
          <ObserveTyping>
            <BlockList />
          </ObserveTyping>
        </WritingFlow>
        <Popover.Slot />
      </SlotFillProvider>
    </BlockEditorProvider>
  );
}

典型的钩子错误：

Error
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See [link] for tips about how to debug and fix this problem.

我已经设置了一个codepen来在这里输入：https://codesandbox.io/s/sleepy-proskuriakova-op59q
我查了wordpress版本的react，它似乎是16.6.3，所以在沙箱中设置，并使用了旧版本的react脚本（2.1.8），当时使用的是16.6.2，但没有错误的变化。我尝试了几个版本的组合没有变化。
导致这个错误的原因是什么？我怎样才能加载这个组件？