Why is Tanstack Table giving me a type mismatch in my cell definition

[JaegerCryptic]

Hi there. I've been learning how to use react and typescript recently and am currently trying to use Tanstack Table to define a complicated table using generic types for reusability. I'm running into type errors with how I am trying to spread my custom function for cell definition.

The error:

Argument of type '{ getUniqueValues?: AccessorFn<BulkEditRow, unknown[]> | undefined; footer?: ColumnDefTemplate<HeaderContext<BulkEditRow, unknown>> | undefined; ... 22 more ...; id: string; } | ... 6 more ... | { ...; }' is not assignable to parameter of type 'IdentifiedColumnDef<BulkEditRow, number | null>'. Type '{ getUniqueValues?: AccessorFn<BulkEditRow, unknown[]> | undefined; footer?: ColumnDefTemplate<HeaderContext<BulkEditRow, unknown>> | undefined; ... 22 more ...; id: string; }' is not assignable to type 'IdentifiedColumnDef<BulkEditRow, number | null>'. Types of property 'cell' are incompatible. Type 'ColumnDefTemplate<CellContext<BulkEditRow, unknown>> | undefined' is not assignable to type 'ColumnDefTemplate<CellContext<BulkEditRow, number | null>> | undefined'. Type '(props: CellContext<BulkEditRow, unknown>) => any' is not assignable to type 'ColumnDefTemplate<CellContext<BulkEditRow, number | null>> | undefined'. Type '(props: CellContext<BulkEditRow, unknown>) => any' is not assignable to type '(props: CellContext<BulkEditRow, number | null>) => any'. Types of parameters 'props' and 'props' are incompatible. Type 'CellContext<BulkEditRow, number | null>' is not assignable to type 'CellContext<BulkEditRow, unknown>'. The types of 'cell.column.columnDef' are incompatible between these types. Type 'ColumnDef<BulkEditRow, number | null>' is not assignable to type 'ColumnDef<BulkEditRow, unknown>'. Type 'ColumnDefBase<BulkEditRow, number | null> & StringHeaderIdentifier' is not assignable to type 'ColumnDef<BulkEditRow, unknown>'. Type 'ColumnDefBase<BulkEditRow, number | null> & StringHeaderIdentifier' is not assignable to type 'AccessorFnColumnDefBase<BulkEditRow, unknown> & IdIdentifier<BulkEditRow, unknown>'. Property 'accessorFn' is missing in type 'ColumnDefBase<BulkEditRow, number | null> & StringHeaderIdentifier' but required in type 'AccessorFnColumnDefBase<BulkEditRow, unknown>'.ts(2345) types.d.ts(83, 5): 'accessorFn' is declared here. (property) IdentifiedColumnDef<BulkEditRow, number | null>.header?: ColumnDefTemplate<HeaderContext<BulkEditRow, number | null>> | undefined

I pass to a function that determines what should be returned

setTableState: React.Dispatch<React.SetStateAction<TableState>>,
getTableState: TableState,
customUpdateFunction?: CustomUpdateFunction,
mode: 'View' | 'Edit' = 'Edit'
) => {
const editableColumn = useMemo<Partial<ColumnDef<TData>>>(() => {
  return {
    cell: (cellProps) => {
      const isCurrentErrorCell =
        getTableState.errorLocation &&
        cellProps.row.index === getTableState.errorLocation.rowIndex &&
        cellProps.column.id === getTableState.errorLocation.columnId

      const cellValue = cellProps.getValue()
      const displayValue = cellValue === null ? '' : String(cellValue)

      if (
        (getTableState.message != null && !isCurrentErrorCell) ||
        mode === 'View'
      ) {
        return <TableDisplayCell value={displayValue} />
      }

      return (
        <EditableCell
          {...(cellProps as unknown as Cell<TData, unknown>)}
          updateData={
            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
            customUpdateFunction ?? cellProps.table.options.meta!.updateData
          }
          setTableState={setTableState}
        />
      )
    },
  }
}, [
  getTableState.errorLocation,
  getTableState.message,
  mode,
  customUpdateFunction,
  setTableState,
])

return editableColumn
}

This then returns either a cell that is editable using mui textfield or div with a display value inside.

Here is how the useEditableCell is used:

const editableCell = useEditableCell<BulkEditRow>(
    setTableState,
    getTableState
  )

And then used inside the column definitions here:

columnHelper.accessor('percentAustralia', {
       id: 'percentAustralia',
       header: () => RenderDefaultHeaderCell('% Australia'),
       size: 12,
       meta: {
         validate: validatePercentageValueInTable,
       },
       ...editableCell,
     }),

I'm just very confused on why this doesn't work when if I were to simply define the column like so:

cell: (cellProps) => {
   <EditableCell
           {...(cellProps as unknown as Cell<TData, unknown>)}
           updateData={
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             customUpdateFunction ?? cellProps.table.options.meta!.updateData
           }
           setTableState={setTableState}
    />
 }

It works fine. Any help would be appreciated, though everything I am doing is done with a purpose and a specific use case in mind, so I cannot change anything that I am doing.