react-query x typescript data call. error

import React,{useState, useEffect} from 'react';
import Button from '../Button';
import PagenationBtn from './PagenationBtn';
import QuestionItem from './QuestionItem';
import {Fetcher, Link} from 'react-router-dom';
import { useQuery, QueryFunctionContext  } from '@tanstack/react-query';
import { HomeInquiryType } from '@/mocks/homeinquiry';

// export const fetchInquiryData = async () => {
//   try{
//     const response = await fetch(`/questions?page=${page}`);
//     if(response.ok){
//       const data = await response.json();
//       // console.log(data);
//       return data;
//     } else {
//       console.log('error');
//     }

//   } catch (error){
//     console.log(error);
//   }
// };


const QuestionContainer = () => {
  const page = 1; //나중에 함수 생성 

  const {data, error, isLoading} = useQuery<HomeInquiryType[] | any>(['inquiryData'], async () => 
  {
    const resData = await fetch(`/questions?page=${page}`);
    if(resData.ok){
      const realdata = await resData.json();
      return realdata;
    }
  }, {staleTime:Infinity},);

  console.log(data);


  if(isLoading){return <div> Loading ... </div>}
  if(error instanceof Error ) {return <div>ERROR ERROR SORRY : {error.message}</div>}

  return (
    <main className=" flex flex-col">
      <div className=" px-4 py-4">
        <div className=" mb-6 flex justify-between">
          <h2 className=" text-2xl">{'All Questions'}</h2>
          <Link to="/questions/ask"><Button>Ask Question</Button></Link> 
        </div>

        <div className=" flex items-center justify-between gap-3">
          <p>{'222'} questions with bounties</p>
          <div className=" flex rounded-md border border-slate-300 text-sm text-slate-600">
            <button className=" border-r px-2 py-2">Newest</button>
            <button className=" border-r px-2 py-2">Active</button>
            <button className=" border-r px-2 py-2">Bountied</button>
            <button className=" border-r px-2 py-2">Unanswered</button>
          </div>
        </div>
      </div>
      {/* {isLoading ? (
      <div className="relative top-0 p-10">Loading...</div>
    ) : error instanceof Error ? ( // error:unknown
      <div className="relative top-0 p-10">Error: {error.message}</div>
    ) : (
      <div>{Array.from({length:5}).map((e, i) => {
        return <QuestionItem data={data} key={i}/>
      })}</div>
    )} */}

      <div className=" mx-24 mb-24 mt-12 flex">
        {Array.from({ length: 5 }).map((e, i) => {
          if (i == 0) {
            return <PagenationBtn variant={'active'}>{i + 1}</PagenationBtn>;
          }
          return <PagenationBtn variant={'default'}>{i + 1}</PagenationBtn>;
        })}
      </div>
    </main>
  );
};

export default QuestionContainer;

도데체가 알 수가 없습니다 도데체가!!!1