title: validateDOMNesting(...): <button> cannot appear as a descendant of <button>
body: <p>I'm using <code>Material-UI</code> in my project, I'm getting a warning in the console:</p>
  <pre><code>Warning: validateDOMNesting(...): &lt;button&gt; cannot appear as a descendant of &lt;button&gt;
  </code></pre>
  <p>even though there are no direct descendants,</p>
  <pre><code>&lt;form&gt;
    &lt;TextField
      label=&quot;Title&quot;
      value={title}
      onChange={this.handleChange(&quot;title&quot;)}
      className={classes.formControl}
      margin=&quot;normal&quot;
    /&gt;
    &lt;br /&gt;
    &lt;FormControl className={classes.formControl}&gt;
      &lt;InputLabel&gt;Muscles&lt;/InputLabel&gt;
      &lt;Select
        value={muscles}
        onChange={this.handleChange(&quot;muscles&quot;)}
      &gt;
        {categories.map((category, index) =&gt; {
          return (
            &lt;MenuItem key=&quot;index&quot; value={category}&gt;
              {category}
            &lt;/MenuItem&gt;
          );
        })}
      &lt;/Select&gt;
    &lt;/FormControl&gt;
    &lt;br /&gt;
    &lt;TextField
      multiline
      rows={4}
      label=&quot;Description&quot;
      value={description}
      onChange={this.handleChange(&quot;description&quot;)}
      className={classes.formControl}
      margin=&quot;normal&quot;
    /&gt;
  &lt;/form&gt;
  </code></pre>
  <p>Here's the Sandbox link:</p>
  <p><a href="https://codesandbox.io/s/react-material-ui-0yqeo" rel="noreferrer">https://codesandbox.io/s/react-material-ui-0yqeo</a></p>