title: Dialog of material UI has afterimage when being closed
body: <h1>Introduction</h1>
  <p>Bascially <code>&lt;Dialog /&gt;</code> receives <code>open</code> and <code>onClose</code> as props. <code>open</code> is boolean from state and <code>onClose</code> is a function that changes the state.</p>
  <p>I made <code>&lt;CustomModal /&gt;</code> that wraps <code>&lt;Dialog /&gt;</code>, which receives another prop <code>content</code> that defines what to display on <code>&lt;Dialog /</code>&gt;.</p>
  <pre class="lang-js prettyprint-override"><code>// CustomModal.jsx
  
  const CustomModal = props =&gt; (
    &lt;Dialog {...props} sx={{ '&amp; .MuiDialog-paper': { padding: '2em' } }}&gt;
      {props.content}
    &lt;/Dialog&gt;
  );
  </code></pre>
  <p>And I'm delivering handlers using context so that my modal could be open and closed everywhere.</p>
  <pre class="lang-js prettyprint-override"><code>// modalHandlersContext.js
  
  const initialState = {
    open: false,
    content: null,
  };
  
  const ModalHandlersProvider = ({ children }) =&gt; {
    const [modal, setModal] = useState(initialState);
    const handlers = {
      openModal: payload =&gt; setModal({ open: true, ...payload }),
      closeModal: () =&gt; setModal(initialState),
    };
  
    return (
      &lt;ModalHandlersContext.Provider value={handlers}&gt;
        {children}
        &lt;CustomModal
          open={modal.open}
          onClose={handlers.closeModal}
          content={modal.content}
        &gt;&lt;/CustomModal&gt;
      &lt;/ModalHandlersContext.Provider&gt;
    );
  };
  </code></pre>
  <p>When I want to open modal somewhere, I execute a function like this</p>
  <pre class="lang-js prettyprint-override"><code>  const onLogin = () =&gt;
      openModal({
        content: &lt;h1&gt;component&lt;/h1&gt;,
      });
  </code></pre>
  <p>That is, I pass a component. (I used <code>h1</code> for a simple example)</p>
  <h1>Main subject</h1>
  <p>But when I close it, it's not clean.</p>
  <p><a href="https://i.stack.imgur.com/2IaNE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2IaNE.gif" alt="enter image description here" /></a></p>
  <p>I experimented on this to check when this happens.</p>
  <h3>It happens</h3>
  <p>With css, display something from props(same code as above)</p>
  <pre class="lang-js prettyprint-override"><code>const CustomModal = props =&gt; (
    &lt;Dialog {...props} sx={{ '&amp; .MuiDialog-paper': { padding: '2em' } }}&gt;
      {props.content}
    &lt;/Dialog&gt;
  );
  </code></pre>
  <h3>It doesn't happen</h3>
  <ol>
  <li>Without css, display something from props</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/PxXdZ.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PxXdZ.gif" alt="enter image description here" /></a></p>
  <pre class="lang-js prettyprint-override"><code>const CustomModal = props =&gt; (
    &lt;Dialog {...props}&gt;
      {props.content}
    &lt;/Dialog&gt;
  );
  </code></pre>
  <p>2,3. With/Without css, display just plain text</p>
  <pre class="lang-js prettyprint-override"><code>const CustomModal = props =&gt; (
    &lt;Dialog {...props} sx={{ '&amp; .MuiDialog-paper': { padding: '2em' } }}&gt;
      content
    &lt;/Dialog&gt;
  );
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>const CustomModal = props =&gt; (
    &lt;Dialog {...props}&gt;
      content
    &lt;/Dialog&gt;
  );
  </code></pre>
  <br>
  <p>So after that, I tried using <code>&lt;DialogContent /&gt;</code> instead of css but It didn't work. But I have tried using <code>&lt;Modal /&gt;</code> instead of <code>&lt;Dialog /&gt;</code> and it hasn't caused any problems.</p>
  <p>I wanna use <code>&lt;Dialog /&gt;</code> if possible but now can't find the cause.
  Can anyone help?</p>