Shared state between editors

[strdr4605]

I have a use case where the user can write something in the editor or open a modal and write there. When closing the modal the user should see updated text in the first editor.
Each editing is saved in DB and then the text comes back as a prop.

In the example below I have the state of the editor saved in the parent state.

export default function Editor({ serializedEditorState, setLexicalJSON }) {
  function onChange(editorState, editor) {
      const stringifiedEditorState = JSON.stringify(
        editor.getEditorState().toJSON()
      );
      setLexicalJSON(stringifiedEditorState);
  }

  return (
    <LexicalComposer
      initialConfig={{
        ...editorConfig,
        editorState: (editor) =>
          serializedEditorState &&
          editor.setEditorState(editor.parseEditorState(serializedEditorState))
      }}
    >
      <div className="editor-container">
        <PlainTextPlugin
          contentEditable={<ContentEditable className="editor-input" />}
          placeholder={<Placeholder />}
        />
        <OnChangePlugin onChange={onChange} />
        <UpdateEditorStatePlugin
          serializedEditorState={serializedEditorState}
        />
      </div>
    </LexicalComposer>
  );
}

function UpdateEditorStatePlugin({ serializedEditorState }) {
  const [editor] = useLexicalComposerContext();

  useEffect(() => {
    serializedEditorState &&
      editor.setEditorState(editor.parseEditorState(serializedEditorState));
    editor.focus();
  }, [editor, serializedEditorState]);

  return null;
}

My try with UpdateEditorStatePlugin is not working correctly because the focus always goes on the second editor (which makes sense).

What should be the correct way to update another editor's state based on changes in DB made by another editor?

https://codesandbox.io/s/shared-state-between-editors-osu4o9