reactjs - Hvorfor giver Tanstack Table mig en typemismatch i min celledefinition

Jeg har for nylig lært at bruge React og TypeScript og prøver i øjeblikket at bruge Tanstack Table til at definere en kompliceret tabel ved hjælp af generiske typer for genanvendelighed. Jeg støder på typefejl med måden, jeg forsøger at sprede min brugerdefinerede funktion til celledifinition.

Fejlen:

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

Jeg sender til en funktion, der bestemmer, hvad der skal returneres

export const useEditableCell = <TData extends object>(
  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
}

Dette returnerer derefter enten en celle, der kan redigeres ved hjælp af MUI TextField, eller en div med en visningsværdi indeni.

Her er, hvordan useEditableCell bruges:

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

Og derefter brugt inde i kolonnedefinitionerne her:

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

Jeg er bare meget forvirret over, hvorfor dette ikke virker, når jeg blot skulle definere kolonnen sådan her:

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

Det fungerer fint. Enhver hjælp ville blive værdsat, selvom alt, hvad jeg gør, gøres med et formål og en specifik brugssituation i tankerne, så jeg kan ikke ændre noget af det, jeg gør.