Tengo un proyecto en react y mi código funciona totalmente bien pero me salen estos errores en la consola. He intentando mover algunas etiquetas pero aun así me sigue saliendo los mismos errores, como ya dije no molesta a la hora de la ejecución del programa en si pero aun así no me gusta verlos y quiero saber el porque de esos errores.
Warning: validateDOMNesting(...): <caption> cannot appear as a child of <div>.
validateDOMNesting(...): <th> cannot appear as a child of <tbody>.
A que se debe?
AQUI ESTA EL JSX
<div id="content" className="card text-left " >
<caption style={styles.title}>INFORMACIÓN DE REGISTRO</caption>
<Table className="table table-bordered">
<tbody>
<tr>
<th style={styles.th} scope="row" colSpan="1">
Nombre de la Cuenta:
</th>
<td style={styles.td}>{merchantName}</td>
<th scope="row" style={styles.th}>
ID:
</th>
<td>{Id}</td>
</tr>
<tr>
<th scope="row" style={styles.th}>
Usuario que registro la cuenta:
</th>
<td style={styles.td}>{officerUpdate}</td>
<th scope="row" style={styles.th}>
Fecha:
</th>
<td style={styles.td}>{activationDate}</td>
</tr>
<tr>
<th scope="row" style={styles.th}>
Tipo de cuenta:
</th>
<td style={styles.td}>{merchantType}</td>
</tr>
<tr>
<td style={styles.td} colSpan="4">
Los terminos y condiciones son aceptados por defecto al momento
del registro de la cuenta.
<a href="https://www.paguelofacil.com/terminos-y-condiciones">
https://www.paguelofacil.com/terminos-y-condiciones
</a>
</td>
</tr>
</tbody>
</Table>
</div>
<br />
Tabla
con mayúscula, que hace pensar que es un componente.