CKEditor 5 [Classic Build] - Regain focus and disable read-only mode when clicked on a read-only editor

I'm trying to integrate CKEditor5 (Classic build) for my React app

One of the use-case that I'm currently unable to solve is to have a editable Editor (non-readOnly mode) only when we click on the editor (onFocus event) and it should switch back to read-only mode as soon as the editor loses focus (onBlur event).

Although I'm noticing that once the editor loses focus and is set to read-only, then it doesn't get the focus even upon clicking on the editor.

How can we ensure that once the editor regains focus and if it's in read-only state then we disable the read-only state and hence make it editable again?

Following is my current code snippet:

        <CKEditor
          editor={Editor}
          config={editorConfiguration}
          data={fieldValue}
          onReady={(editor) => {
          }}
          onChange={(event, editor) => {
            setTestData(editor.getData());
          }}
          onBlur={(event, editor) => {
            editor.enableReadOnlyMode("id1");
          }}
          onFocus={(event, editor) => {
            editor.disableReadOnlyMode("id1");
          }}
        />