Hydration failed because the initial UI does not match what was rendered on the server: Next js Tanstack table

Question

I'm recently trying to learn the tanstack table v8 react table.

it renders the columns and data in the table correctly however i'm getting an error that says "Hydration failed because the initial UI does not match what was rendered on the server" "Warning: Expected server HTML to contain a matching in ."

I also checked the closing tags of my tables but it is correct

Code:

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