Custom sortingFn not being run when row key is undefined

<template>
  <table>
    <thead>
      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
        <th
          v-for="header in headerGroup.headers"
          :key="header.id"
          :colSpan="header.colSpan"
          @click="header.column.getToggleSortingHandler()?.($event)"
        >
          <FlexRender
            :render="header.column.columnDef.header"
            :props="header.getContext()"
          />
          <span v-if="header.column.getIsSorted() === 'desc'"> v</span>
          <span v-else-if="header.column.getIsSorted() === 'asc'"> ^</span>
          <span v-else> -</span>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
          <FlexRender
            :render="cell.column.columnDef.cell"
            :props="cell.getContext()"
          />
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script lang="ts">
type Cell = Record<string, unknown>;

export type Cols<Rows extends Cell[] = Cell[]> = {
  key: Extract<keyof Rows[number], string>;
  name: string;
}[];
</script>

<script setup lang="ts" generic="Rows extends Cell[]">
import { computed } from "vue";
import {
  createColumnHelper,
  FlexRender,
  getCoreRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getPaginationRowModel,
  getSortedRowModel,
  useVueTable,
  type Row as TanstackRow,
} from "@tanstack/vue-table";
import type { SortingFn } from "@tanstack/vue-table";

type Props = {
  cols: Cols<Rows>;
  rows: Rows;
};

const props = defineProps<Props>();

type Row = Rows[number];

const columnHelper = createColumnHelper<Row>();

const sortingFunction: SortingFn<Row> = (
  a: TanstackRow<Row>,
  b: TanstackRow<Row>,
) => {
  console.log("sort");
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
};

const columns = computed(() =>
  props.cols.map((col) =>
    columnHelper.accessor((row: Row) => row[col.key], {
      id: col.key,
      header: col.name,
      enableSorting: true,
      sortingFn: sortingFunction,
    }),
  ),
);

const table = useVueTable({
  get data() {
    return props.rows;
  },
  get columns() {
    return columns.value;
  },
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  initialState: {
    pagination: {
      pageIndex: 0,
      pageSize: 999999,
    },
  },
});
</script>

<script setup lang="ts">
import AppTable from "./components/AppTable.vue";

const rows = [
  { static: "test", abc: 123 },
  { static: "test", def: 456 },
  // { static: "test", abc: 789 },
];

const cols = [
  { key: "static", name: "Static" },
  { key: "abc", name: "ABC" },
  { key: "def", name: "DEF" },
];
</script>

<template>
  <AppTable :rows="rows" :cols="cols" />
</template>