title: Is there a way to control where a nested Material UI select in a popper gets mounted in the DOM?
body: <p>I am trying to place a select menu in a Popper. The issue I'm running into is that the nested select menu wants to mount the popup that comes out of it on the body as a neighbor and not a child of popper. This causes the clickaway event to fire. Here's the code to reproduce it: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { useState } from "react";
  import "./styles.css";
  import Popper from "@material-ui/core/Popper";
  import TextField from "@material-ui/core/TextField";
  import MenuItem from "@material-ui/core/MenuItem";
  import ClickAwayListener from "@material-ui/core/ClickAwayListener";
  
  export default function App() {
    const [popperAnc, setPopperAnc] = useState(null);
  
    const popperOpen = Boolean(popperAnc);
  
    return (
      &lt;div className="App"&gt;
        &lt;div
          onClick={e =&gt; {
            setPopperAnc(e.currentTarget);
          }}
        &gt;
          Popper anchor
        &lt;/div&gt;
        &lt;div style={{ position: "absolute" }}&gt;
          &lt;Popper open={popperOpen} anchorEl={popperAnc}&gt;
            &lt;ClickAwayListener
              onClickAway={e =&gt; {
                setPopperAnc(null);
              }}
            &gt;
              &lt;TextField select label="Menu"&gt;
                &lt;MenuItem value="select1"&gt;Select me!&lt;/MenuItem&gt;
              &lt;/TextField&gt;
            &lt;/ClickAwayListener&gt;
          &lt;/Popper&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://codesandbox.io/s/strange-bassi-liwdc?file=/src/App.js:0-1013" rel="nofollow noreferrer">https://codesandbox.io/s/strange-bassi-liwdc?file=/src/App.js:0-1013</a></p>