JSX breaks type inference with GraphQL TypedDocumentNode

Question

I'm trying to create a table abstraction for a TypedDocumentNode query. I want to pass the typed document node to the table component and define an accessor to retrieve the row (TValue) and the pagination.

The generic TValue does not get inferred when calling the function using JSX, but it does when calling the function regularly.

Why is TValue not inferred when using JSX syntax?

const purchasableExtrasQuery = graphql(`
  query PurchasableExtras($page: Int, $first: Int!) {
    purchasableExtras(
      page: $page
      first: $first
    ) {
      paginatorInfo {
        total
        lastPage
        currentPage
        count
        hasMorePages
        perPage
      }
      data {
        id
        name
        description
      }
    }
  }
`);

type TableProps<TQuery, TVariables, TValue> = {
  columns: ColumnDef<TValue>[];
  query: TypedDocumentNode<TQuery, TVariables>;
  accessor: (data: TQuery) => {
    data: TValue[];
    paginatorInfo: PaginatorInfo;
  };
};

export function Table<TQuery, TVariables, TValue>({}: TableProps<
  TQuery,
  TVariables,
  TValue
>) {
  return null;
}

const bar = (
  <Table
    columns={[
      {
        header: "ID",
        accessorFn: (data) => data.id, // << data is unknown
      },
    ]}
    accessor={(data) => data.supplierPurchasableExtras}
    query={purchasableExtrasQuery}
  />
);

Table({
  query: purchasableExtrasQuery,
  accessor: (data) => data.supplierPurchasableExtras,
  columns: [
    {
      header: "ID",
      accessorFn: (data) => data.id,  // << data is typed correctly
    },
  ],
});