React JoditEditor insert image not working

Question

I have used JoditEditor to insert image in my code. But when I try to insert an image, I can't put image URL into URL field and Insert button doesn't work. Can anyone help me with it? Screenshot and my code are given below:

const editor = useRef(null);
const config = {
readonly: false, // all options from https://xdsoft.net/jodit/doc/};

const [content, setContent] = useState("");
<JoditEditor
            ref={editor}
            value={content}
            config={config}
            tabIndex={1}
            onBlur={(newContent) => setContent(newContent)}
            onChange={(newContent) => {}}
          />

Screenshot

Answer 1

For those using react bootstrap modal, the fix is adding enforceFocus={false} to the Modal properties.

Answer 2

I guess you are using Modal. I had the same problem and this is how I fixed it in material-ui Modal by adding disableEnforceFocus props.

  <Modal open={true} disableEnforceFocus>
    <JoditEditor
        ref={editor}
        value={content}
        config={config}
        tabIndex={1}
        onBlur={(newContent) => setContent(newContent)}
        onChange={(newContent) => {}}
      />
  </Modal>