generic column cell helper function

function cell<TData, TValue>(
  f: (value: TValue, orig: TData, props: CellContext<TData, TValue>) => any
) {
  return function (props: CellContext<TData, TValue>) {
    const value = props.getValue();
    const orig = props.row.original;
    return f(value, orig, props);
  };
}

const columnHelper = createColumnHelper<{
  id: number;
  email: string;
  role: string;
}>();

const columns = [
  columnHelper.accessor("id", {
    id: "id",
    cell: cell((v) => <span>{v}</span>),
    header: () => <span>Name</span>,
  }),
  columnHelper.accessor("email", {
    id: "name",
    cell: cell((v) => <span>{v}</span>),
    header: () => <span>Name</span>,
  }),
];

const cellFn = (v: string) => <span>{v}</span>;

const columns = [
  columnHelper.accessor("id", {
    cell: cell(cellFn), // error here
  }),
  columnHelper.accessor("email", {
    cell: cell(cellFn),
  }),
];