title: Incorrect popover menu position when anchor element is externalized into another component
body: <p>I'm new to both React and Material-UI. While <a href="https://material-ui.com/components/menus/" rel="nofollow noreferrer">examples</a> work fine and perfectly make sense, they all use inline elements for both triggering button and the menu itself. I want to have some conditionals. For this, I'd rather have a separate component/function that renders this or that. However as soon as I move triggering button into a function, I get</p>
  
  <pre><code>Material-UI: the `anchorEl` prop provided to the component is invalid.
  The anchor element should be part of the document layout.
  Make sure the element is present in the document or that it's not display none.
  </code></pre>
  
  <p>I looked through similar questions here, but none of them looked relevant&hellip; or I didn't get them:(</p>
  
  <p>Here is the code for modified example where I want to externalize button rendering into a function (to later add conditional and what not)
  </p>
  
  <pre><code>export default function SimpleMenu() {
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    const handleClick = event =&gt; {
      setAnchorEl(event.currentTarget);
    };
  
    const Qqq = () =&gt; {
      return (
        &lt;Button
          aria-controls="simple-menu"
          aria-haspopup="true"
          onClick={handleClick}
        &gt;
          Broken Menu
        &lt;/Button&gt;
      )
    }
  
    const handleClose = () =&gt; {
      setAnchorEl(null);
    };
  
    return (
      &lt;div&gt;
        &lt;p&gt; hello&lt;/p&gt;
        &lt;Button
          aria-controls="simple-menu"
          aria-haspopup="true"
          onClick={handleClick}
        &gt;
          Open Menu
        &lt;/Button&gt;
        &lt;Qqq /&gt;
        &lt;Menu
          id="simple-menu"
          anchorEl={anchorEl}
          keepMounted
          open={Boolean(anchorEl)}
          onClose={handleClose}
        &gt;
          &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt;
          &lt;MenuItem onClick={handleClose}&gt;My account&lt;/MenuItem&gt;
          &lt;MenuItem onClick={handleClose}&gt;Logout&lt;/MenuItem&gt;
        &lt;/Menu&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>Here is the fiddle
  <a href="https://codesandbox.io/s/material-demo-7bnki?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">https://codesandbox.io/s/material-demo-7bnki?fontsize=14&amp;hidenavigation=1&amp;theme=dark</a> . I did try to use SO code snippet, but I was getting some error about <code>https://stacksnippets.net/js</code> :(</p>
  
  <p>What am I missing to make things work?</p>