as the title says, Jodit Component in react works fine if it is not inside a dialog, but if it is inside a dialog, popups are being non focusable, and are being behind the dialog itself, which make them unreachable.

const Example = ({}) => {
  const editor = useRef(null);
  const [content, setContent] = useState("");

  const config = {
    readonly: false // all options from https://xdsoft.net/jodit/doc/
  };

  function mod(){
    document.getElementById('modal').showModal()
  }
  return (
    <div>
        <button  onClick={(e)=>mod()}>open dialog</button>
      <dialog id='modal' >
      <form method='dialog'>
    <JoditEditor
      ref={editor}
      value={content}
      config={config}
      tabIndex={1} // tabIndex of textarea
      onBlur={(newContent) => setContent(newContent)} // preferred to use only this option to update the content for performance reasons
      onChange={(newContent) => {}}
    />
     </form>
    </dialog>
    </div>
  );
}
export default Example;

a screenshot of when i try to insert a table

as you see, the table popup is showing behind the dialog, i am not sure how to fix this.