Error:Hydration failed because the initial UI does not match what was rendered on the server

Question

// App.js

    "use client";

import React, { useEffect, useMemo, useState } from "react";
import BasicTable from "../components/BasicTable";
import axios from "axios";
import Form from "../components/Form";

export default function Vendor() {
  const [defaultData, setDefaultData] = useState([]);

  useEffect(() => {
    const generateData = async () => {
      await axios
        .get("https://jsonplaceholder.typicode.com/posts")
        .then((response) => setDefaultData(response.data));
    };
    generateData();
  }, []);

  const columns = [
    {
      id: 1,
      Header: "user ID",
      accessorKey: "userID",
    },
    {
      id: 2,
      Header: "id",
      accessor: "id",
    },
    {
      id: 3,
      Header: "body",
      accessor: "body",
    },
    {
      id: 4,
      Header: "title",
      accessor: "title",
    },
  ];

// index.js

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




import { CompactTable } from "@table-library/react-table-library/compact";
import { useTheme } from "@table-library/react-table-library/theme";
import { getTheme } from "@table-library/react-table-library/baseline";
import { useMemo } from "react";

export default function BasicTable({ data, columns }) {
  const dataTable = useMemo(() => data, [data]);
  
  const table = useReactTable({
    data: dataTable,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });


  return (
    <div>
      Basic table
      <div className="border-solid border-2 rounded mt-5">
        <table>
        {/* MAY HYDRATION ISSUE */}
        {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>
    </div>
  );
}

I'm new to using tanstack react-table so i've followed some resources in building this.

I've followed the fix for useReactTable from my previous post because im experiencing problems when rendering data to my table. However when the table is rendering it gives me hydration error. I'm using nextjs and tanstack v8 table