title: Why is it that material-ui calls their dialogs twice?
body: <p>I tried to set a modal first and I noticed that behaviour, then I changed it for a dialog and it is the same.</p>
  <p>I tried this:</p>
  <pre><code>import Dialog, { DialogProps } from '@material-ui/core/Dialog';
  import { useStores } from './stores';
  import { useObserver } from 'mobx-react';
  
  export const MyDialog: React.FC&lt;Partial&lt;DialogProps&gt;&gt; = (props) =&gt; useObserver(() =&gt; {
    const { uiStore: { dialogConfig: { open, body } } } = useStores();
  
    if (!body) { return null; }
  
    return (
      &lt;Dialog {...{ ...props, open, maxWidth: false }}&gt;
        { body }
      &lt;/Dialog&gt;
    );
  });
  </code></pre>
  <p>I call it in the app.tsx: <code>&lt;MyDialog /&gt;</code></p>
  <p>And when I call the function to show the dialog, it shows twice in the DOM, what makes me curious is that one of them has the <code>aria-hidden=true</code> attribute.</p>
  <p><a href="https://i.stack.imgur.com/putVg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/putVg.png" alt="enter image description here" /></a></p>
  <p>But they have the exact same content inside if I inspect them.</p>
  <p>I noticed something similar in the docs page <a href="https://material-ui.com/components/dialogs/" rel="nofollow noreferrer">https://material-ui.com/components/dialogs/</a>, if you inspect the DOM, there is always one dialog but the difference is that it has <code>visibility: hidden</code>.</p>
  <p>Any ideas about this?</p>
  <p><a href="https://i.stack.imgur.com/GzfZd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GzfZd.png" alt="enter image description here" /></a></p>