title: MUI - How to open Dialog imperatively/programmatically
body: <p>Normally this is how you use MUI <a href="https://material-ui.com/components/dialogs/#dialog" rel="noreferrer"><code>Dialog</code></a>. The code below is taken from the docs:</p>
  <pre><code>export default function AlertDialog() {
    const [open, setOpen] = React.useState(false);
    const handleClickOpen = () =&gt; setOpen(true);
    const handleClose = () =&gt; setOpen(false);
  
    return (
      &lt;div&gt;
        &lt;Button variant=&quot;outlined&quot; color=&quot;primary&quot; onClick={handleClickOpen}&gt;
          Open Dialog
        &lt;/Button&gt;
        &lt;Dialog open={open} onClose={handleClose}&gt;
         {...}
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>But I want it to create the <code>Dialog</code> imperatively, sort of like fire and forget. I do not want to <em>embed</em> the <code>Dialog</code> component in other components whenever I need to create them. Ideally I'd want to call it like this</p>
  <pre><code>createDialog(&lt;&gt;
     &lt;h1&gt;My Dialog&lt;/h1&gt;
     &lt;span&gt;My dialog content&lt;/span&gt;
     &lt;button onClick={() =&gt; closeDialog()}&gt;Close&lt;/button&gt;
  &lt;/&gt;)
  </code></pre>
  <p>So my component definition'd look like this</p>
  <pre><code>const createDialog = () =&gt; {
     // ???
  }
  const closeDialog = () =&gt; {
     // ???
  }
  export default function AlertDialog() {
    const [open, setOpen] = React.useState(false);
    const handleClickOpen = () =&gt; setOpen(true);
    const handleClose = () =&gt; {
       createDialog(&lt;&gt;
          &lt;h1&gt;My Dialog&lt;/h1&gt;
          &lt;span&gt;My dialog content&lt;/span&gt;
          &lt;button onClick={() =&gt; closeDialog()}&gt;Close&lt;/button&gt;
       &lt;/&gt;)
    };
  
    return (
      &lt;Button variant=&quot;outlined&quot; color=&quot;primary&quot; onClick={handleClickOpen}&gt;
        Open Dialog
      &lt;/Button&gt;
    );
  }
  </code></pre>