Les données de la table ne s'alignent pas sur thead lors de l'imbrication de tbody dans React

J'essaie de créer une table réductible dans React, en utilisant ce codepen (construit avec HTML5 et Jquery) comme référence. J'ai converti le code en React codepen, cependant, les données du tableau ne s'alignent pas sur le titre. De plus, je reçois l'avertissement ci-dessous. Quelqu'un peut-il me dire comment aligner correctement les données de la table ? Toute aide que vous pouvez fournir serait grandement appréciée.

ATTENTION : validateDOMNesting(...) : tbody ne peut pas apparaître comme un enfant de tbody.

Image:

Extrait de code:

<table>
 <thead>
 <tr>
 <th>Regian</th>
 <th>Q1 2010</th>
 <th>Q2 2010</th>
 <th>Q3 2010</th>
 <th>Q4 2010</th>
 </tr>
 </thead>
 <tbody>
 <tbody className="labels">
 <tr>
 <td colSpan="5">
 <label htmlFor="accounting">Accounting</label>
 <input
  type="checkbox"
  name="accounting"
  id="accounting"
  data-toggle="toggle"
  onClick={showNestedData}
 ></input>
 </td>
 </tr>
 </tbody>
 <tbody className="hide">
 <tr>
 <td>Australia</td>
 <td>$7,685.00</td>
 <td>$3,544.00</td>
 <td>$5,834.00</td>
 <td>$10,583.00</td>
 </tr>
 <tr>
 <td>Central America</td>
 <td>$7,685.00</td>
 <td>$3,544.00</td>
 <td>$5,834.00</td>
 <td>$10,583.00</td>
 </tr>
 </tbody>
 </tbody>
</table>

Solution du problème

On dirait que commenter l'élément parent tbody a fait l'affaire. Voir codepen mis à jour.