title: <thead> cannot appear as a child of <div>. when using react material-ui/core
body: <p>first time react user (BE learning FE here) </p>
  
  <p>when i try to create my table I am getting these errors, and as a result my table wont populate with the data I am trying to pull in via my API. </p>
  
  <p>the error messages I am getting in the console: </p>
  
  <p><code>Warning: validateDOMNesting(...): &lt;thead&gt; cannot appear as a child of &lt;div&gt;.</code>
  <code>Warning: validateDOMNesting(...): &lt;tbody&gt; cannot appear as a child of &lt;div&gt;.</code></p>
  
  <p>my code: </p>
  
  <pre><code>        &lt;Paper&gt;
              &lt;Grid container&gt;
                  &lt;Grid item xs={6}&gt;
                      &lt;DCandidateForm /&gt;
                  &lt;/Grid&gt;
  
                  &lt;Grid item xs={6}&gt;
                      &lt;TableContainer&gt;
                          &lt;TableHead&gt;
                              &lt;TableRow&gt;
                                  &lt;TableCell&gt;Name&lt;/TableCell&gt;
                                  &lt;TableCell&gt;Mobile&lt;/TableCell&gt;
                                  &lt;TableCell&gt;Blood Group&lt;/TableCell&gt;
                              &lt;/TableRow&gt;
                          &lt;/TableHead&gt;
                          &lt;TableBody&gt;
                              {
                                  props.dCandidateList.map((record, index) =&gt; {
                                      return (&lt;TableRow key={index}&gt;
                                          &lt;TableCell&gt;{record.fullName}&lt;/TableCell&gt;
                                          &lt;TableCell&gt;{record.mobile}&lt;/TableCell&gt;
                                          &lt;TableCell&gt;{record.bloodGroup}&lt;/TableCell&gt;
                                      &lt;/TableRow&gt;)
                                  })
                              }
                          &lt;/TableBody&gt;
                      &lt;/TableContainer&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/Paper&gt;
  
  
  note: I am using the @material-ui/core package for react. 
  Is it a problem with how i am structuring my table?
  
  
  </code></pre>