UseQuery Parameters in Typescript

import { AxiosError } from 'axios';
import { useQuery, UseQueryOptions } from '@tanstack/react-query';
import { baseAxios } from 'src/utils/baseAxios';

type Roles = {
  items: readonly {
    id: string;
    roleDesc: string;
    rolePermissionAssignments: [
      {
        permission: {
          id: string;
          permDesc: string;
        };
      }
    ];
  }[];
  ts: number;
};

async function fetchRoles(): Promise<Roles> {
  const res = await baseAxios.get('/sysadmin/roles');
  return res.data;
}

function useRoles<TData = Roles>(options?: UseQueryOptions<Roles, AxiosError, TData>) {
  return useQuery('roles', fetchRoles, options);
}

export default function Roles() {
  const { isFetching, ...queryInfo } = useRoles();

  console.log(isFetching);
  console.log(queryInfo);

  return <div>Testing...</div>;
}