next.jsでtableタグを使用したらエラーが出た

tableタグを使って表を作成している中で出会ったエラー

return (
        <table>
            <tr>
                {tableData.map((item, index) => (
                    <th key={index}>
                        {item}
                    </th>
                ))}
            </tr>
        </table>
    );

このように記述すると以下のエラーを吐く

サイト更新前に吐くエラー

app-index.js:31 Warning: 
validateDOMNesting(...): <tr> cannot appear as a child of <table>. 
Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

更新後のエラー

Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <tr> in <table>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

更新前のエラーが参考になった。どうやら tbodyかthead, tfootタグで囲んでからtrを使う必要があるらしい。
以下のコードで解決

return (
        <table>
            <thead>
                <tr>
                    {tableData.map((item, index) => (
                         <th key={index}>
                            {item}
                        </th>
                    ))}
                </tr>
            </thead>
        </table>
    );