Material UI Sortable Table not working: Error

I’ve been following the Sorting & selecting section of this component. Worked great with fake data but now I’m trying to pass my real object through I’m getting an error I’m struggling to figure out (NB: I’m new to react / typescript).

The Error:
Argument of type ‘EventAudit[]’ is not assignable to parameter of type ‘readonly { __typename: string | number; clientSourceId: string | number; data: string | number; event: string | number; exception: string | number; externalId: string | number; processedOn: string | number; … 4 more …; user: string | number; }[]’.
Type ‘EventAudit’ is not assignable to type ‘{ __typename: string | number; clientSourceId: string | number; data: string | number; event: string | number; exception: string | number; externalId: string | number; processedOn: string | number; … 4 more …; user: string | number; }’.
Types of property ‘__typename’ are incompatible.
Type ‘string | undefined’ is not assignable to type ‘string | number’.
Type ‘undefined’ is not assignable to type ‘string | number’.ts(2345)

The stableSort function:

    function stableSort<T>(
  array: readonly T[],
  comparator: (a: T, b: T) => number
) {
  const stabilizedThis = array.map((el, index) => [el, index] as [T, number]);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) {
      return order;
    }
    return a[1] - b[1];
  });
  return stabilizedThis.map((el) => el[0]);
}

My EventAudit object

export type EventAudit = {
  readonly __typename?: 'EventAudit';
  readonly clientSourceId: Scalars['String'];
  readonly data: Scalars['String'];
  readonly event: Scalars['String'];
  readonly exception: Scalars['String'];
  readonly externalId: Scalars['Int'];
  readonly processedOn: Scalars['TimeStamp'];
  readonly raceNumber: Scalars['Int'];
  readonly sentOn: Scalars['TimeStamp'];
  readonly stackTrace: Scalars['String'];
  readonly status: Scalars['String'];
  readonly user: Scalars['String'];
};

My useAudits function:

import { useEffect, useState } from 'react';
import { EventAudit, useAuditsQuery } from '../../generated/graphql';

export default function useAudits(externalID: string) {
  const [audits, setAudits] = useState<EventAudit[]>([]);

  const { data, loading } = useAuditsQuery({
    fetchPolicy: 'cache-and-network',
    variables: { externalID: externalID },
    pollInterval: 30 * 60 * 1000,
  });

  useEffect(() => {

    if (data) {
      const auditsData = data.audits.slice();
      setAudits(auditsData as EventAudit[]);
    }
  }, [data]);


  return {
    audits: audits,
    loading,
  };
}