An Editor ➕ an EditorStatic in one page will cause bad performance.

[Minf97]

what should I do if I want to make a page that "Left is an Editor, and right is an EditorStatic preview" just like the following image?

I achieve this with the following code, but actually got a bad performance while using useState to control editorStatic value. I sincerely ask for your help. Many thanks!

export default function Page() {
  const t = useTranslations("editor");
  const [editorValue, setEditorValue] = useState("");
  const editor = useCreateEditor();
  const editorStatic = createSlateEditor({
      value: editorValue,
      plugins: ...
  });

  return (
    <DndProvider backend={HTML5Backend}>
      <Plate
        editor={editor}
        onValueChange={(e) => {
          setEditorValue(e?.value as any);
        }}
      >
        <div className="min-h-screen bg-background">
          <div className="grid grid-cols-1 lg:grid-cols-2">
            {/* left */}
            <div
              className="bg-editor-paper p-4 shadow-sm h-screen w-full"
              data-registry="plate"
            >
              <SettingsProvider>
                <EditorContainer>
                  <Editor
                    variant="demo"
                    placeholder="Type..."
                  />
                </EditorContainer>
                <SettingsDialog />
              </SettingsProvider>
            </div>

            {/* right */}
            <div className="bg-editor-preview p-6 shadow-sm overflow-auto relative">
             <EditorStatic
                components={editorStaticComponents}
                editor={editorStatic}
              />
              
            </div>
          </div>

        </div>
      </Plate>
    </DndProvider>
  );
}