Re-Useable Tanstack Table Columns Error | TanStack | Page 1

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function BasicTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <table className="w-full border border-collapse">
      <thead>
        {table.getHeaderGroups().map((headerGroup) => (
          <tr key={headerGroup.id} className="bg-gray-50">
            {headerGroup.headers.map((header) => (
              <th key={header.id} className="px-5 py-3 text-left">
                {header.isPlaceholder
                  ? null
                  : flexRender(
                      header.column.columnDef.header,
                      header.getContext(),
                    )}
              </th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody>
        {table.getRowModel().rows.map((row, rowIndex) => (
          <tr key={row.id}>
            {row.getVisibleCells().map((cell, cellIndex) => (
              <td
                key={cell.id}
                className={`${
                  cellIndex === 0
                    ? rowIndex % 2 === 0
                      ? "bg-gray-100"
                      : "bg-gray-200"
                    : rowIndex % 2 === 0
                      ? "bg-white"
                      : "bg-gray-100"
                } py-3 px-5 max-w-[10rem] truncate`}
              >
                {flexRender(cell.column.columnDef.cell, cell.getContext())}
              </td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}```

Type '((ColumnDefBase<TBooking, number> & StringHeaderIdentifier) | (ColumnDefBase<TBooking, number> & IdIdentifier<...>) | ... 10 more ... | { ...; })[]' is not assignable to type 'ColumnDef<TBooking, number>[]'.
  Type '(ColumnDefBase<TBooking, number> & StringHeaderIdentifier) | (ColumnDefBase<TBooking, number> & IdIdentifier<...>) | ... 10 more ... | { ...; }' is not assignable to type 'ColumnDef<TBooking, number>'.
    Type 'ColumnDefBase<TBooking, { firstName: string; lastName: string; phone: string; }> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<TBooking, number>'.
      Type 'ColumnDefBase<TBooking, { firstName: string; lastName: string; phone: string; }> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<TBooking, number> & IdIdentifier<TBooking, number>'.
        Property 'accessorFn' is missing in type 'ColumnDefBase<TBooking, { firstName: string; lastName: string; phone: string; }> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<TBooking, number>'.ts(2322)
types.d.ts(83, 5): 'accessorFn' is declared here.
TimeSheetTable.tsx(11, 3): The expected type comes from property 'columns' which is declared here on type 'IntrinsicAttributes & DataTableProps<TBooking, number>'```

#Re-Useable Tanstack Table Columns Error