I'm facing issue with follow DraftJS editor component.

import React, { useRef } from "react";
import styled from "styled-components";
import { EditorState, Editor as DraftEdior } from "draft-js";

const Wrapper = styled.div`
  border: 1px solid #ccc;
  padding: 1rem;
`;

interface IEditorProps {
  state: EditorState;
  onChange: (state: EditorState) => void;
  readOnly?: boolean;
}

export const Editor: React.FunctionComponent<IEditorProps> = (props) => {
  const { state, onChange, readOnly } = props;

  const ref = useRef<DraftEdior | null>(null);

  return (
    <Wrapper onClick={() => ref?.current?.focus()}>
      <DraftEdior
        ref={ref}
        editorState={state}
        onChange={onChange}
        readOnly={!!readOnly}
      />
    </Wrapper>
  );
};

export default Editor;

and the App.js

import React from "react";
import { EditorState } from "draft-js";
import { Editor } from "./Editor";

const App = () => {
  const [state, setState] = React.useState<EditorState>(() =>
    EditorState.createEmpty()
  );
  return (
    <>
      <h3>Editor</h3>
      <Editor state={state} onChange={(state) => setState(state)} />

      <h3>Result</h3>
      <Editor state={state} readOnly onChange={() => null} />
    </>
  );
};

export default App;

When only a single editor on the page, everything work ok. But the editor continuously lost focus when I add a readonly component.

This is a code sanbox link

https://codesandbox.io/s/vigilant-wilson-70op8?file=/src/App.tsx:0-451

How to fix it, thank you very much.