Next.js中使用TanStack Table v8出现Hydration不匹配错误的求助

最近我在学习TanStack Table v8（也就是React Table），表格本身能正常渲染列和数据，但一直弹出两个 hydration 相关的错误：

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

我已经仔细检查过表格的闭合标签了，确认是没问题的，有没有大佬能帮忙看看问题出在哪？

我的代码如下：

"use client";

import {
  useReactTable,
  getCoreRowModel,
  flexRender,
} from "@tanstack/react-table";
import { useMemo } from "react";

const Table = ({ data, columns }) => {
  const dataTable = useMemo(() => data, [data])

  const table = useReactTable({
    data: dataTable,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });
  return (
    <div>
      BasicTable
      <table>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id}>
            {headerGroup.headers.map((header) => (
              <th key={header.id}>
                {flexRender(
                  header.column.columnDef.header,
                  header.getContext()
                )}
              </th>
            ))}
          </tr>
        ))}
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <td key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
};

export default Table;

备注：内容来源于stack exchange，提问作者Denyyel