Typescript issues with infinitequery and initial data

[useEffects]

import type { UseInfiniteQueryOptions, QueryKey } from '@tanstack/react-query';
import { useInfiniteQuery } from '@tanstack/react-query';
import {merge} from "lodash"

type Data = {id: string}

const createQpts = (queryOptions: Omit<UseInfiniteQueryOptions<Data[]>, 'queryKey' | 'getNextPageParam' | 'initialPageParam'> = {}) => {
  return merge({
    queryKey: ['queryKey'],
    queryFn:() => [] as Data[],
    initialPageParam: 1,
    getNextPageParam: () => null,
    initialData: {
      pages: [],
      pageParams: []
    }
  } as UseInfiniteQueryOptions<Data[]>, queryOptions )
}

const {data} = useInfiniteQuery(createQpts())

// const finalData = data.pages <---- Error
const finalData = data

Typescript playground: https://www.typescriptlang.org/play/#code/JYWwDg9gTgLgBDAnmApnA3nAqgZxQSQDsAzYQ4GFARQFcUpEB5MGYCQnAGjlvsQGkUiOAF84xKBBBwA5AAEYAQw5KAxgGsA9FBSLVMALQBHOgxkBuALAAoUJFgY4NPEVLlKvBqPGTp8pSp6Wjp6hiZ8FjZ20PDoIPQA5ihiElJwAEQANhAAJoo4ABbpNjZIqHAAIopKcAC8GMA5AFxwODBQZAkiJdaq7G1wqiEeLDh1cAAU4QzMrP0tjCAUADy4BCRkFNSmTCxsHMtVSgDaALoAfNwy0wJCMnAAPrJJMAByKAAeMAAKikm-UEUIHuTxkm1Yikyv3+ikBwPO43QIgAlHUEegbHA4DoYDQoIQ4PEoEkJhjrFisTdBIgWsdrjtqTJTpxMRSbgAxQhNCao2oIs5wfKVaqKM4s8kU8HASHQlAAoEtACM4opcBe7y+svlIBaPLRcEINEymRVkvc0syR0ULTJqqxYD+KBwtOZrNVDphcOdcDObtErLEQrWrnB2z4s32OEOIrOlzgNwj-TgyJs3WsNj6KgweSUYnqznWbi2nkQEyGuhGMBwPJT6esmk0g368DckKt4xzigAdB6nXBlgZBwY4ABRKCSKAZ5viMhtkUdkVAA