Table data does not align with thead when nesting tbody in React

Question

I am attempting to create a collapsable table in React, using this codepen (built with HTML5 and Jquery) as a reference. I have converted the code into a React codepen, however, the table data does not align with the thead. In addition, I am getting the warning below. Can anyone advise how I can get the table data to align properly? Any assistance you can provide would be greatly appreciated.

WARNING: validateDOMNesting(...): tbody cannot appear as a child of tbody.

Image:

Code Snippet:

<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>

Answer 1

Looks like commenting out the parent tbody element did the trick. See updated codepen.