Issue with type definition on react-query response: Property 'x' does not exist on type

Question

so I am new to react-query and Tansack, and I am having an issue trying to type the response, I am currently using Next.js. If I console log my reponse I get the following object, so apparently work:

{
    "data": {
        "articleCollection": {
            "items": [
                {
                    "articleTitle": "Title one",
                    "articleBody": "Sample text"
                },
                {
                    "articleTitle": "Title two",
                    "articleBody": "Sample text"
                },
                {
                    "articleTitle": "Title three",
                    "articleBody": "Sample text"
                },
                {
                    "articleTitle": "Title four",
                    "articleBody": "Sample text"
                }
            ]
        }
    }
}

Then in my Page sample, I have

import { GetStaticProps } from "next";
import { Data } from "../../types/lib";
//import { Articles } from "../../types/lib";
import { queryArticle } from "../utils/queries/index";
import dispatchQueryHeadless from "../utils/hooks/index";
import ListArticle from "@/components/articles/ListArticle";

import { dehydrate, DehydratedState, QueryClient, useQuery, UseQueryResult } from "@tanstack/react-query";

//Getting static Props
export const getStaticProps: GetStaticProps = async (): Promise<{ props: { articles: DehydratedState } }> => {
  const queryClient = new QueryClient();

  await queryClient.prefetchQuery({
    queryKey: ["GetArticle"],
    queryFn: () => dispatchQueryHeadless.callAPI(queryArticle, "en"),
  });

  return {
    props: {
      articles: dehydrate(queryClient),
    },
  };
};

//Returning component
const Home = () => {
  const { isLoading, isError, error, data }: UseQueryResult<Data, Error> = useQuery<Data, Error>({
    queryKey: ["GetArticle"],
    queryFn: () => dispatchQueryHeadless.callAPI(queryArticle, "en"),
  });

  if (isLoading) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }
  if (isError) return <p>There is an error -- {error?.message}</p>;


  // console.log(data);
  return <ListArticle articleCollection={data.data.articleCollection} />;
};



export default Home;

So in my types definitions I have :

export interface Article {
  articleTitle: string;
  articleBody: string;
}

export type Data = {
  data: {
    articleCollection: ArticleCollection;
  };
};

export type ArticleCollection = {
  items: { items: Article[] };
};

Then hover the prop "articleCollection" on the component 'ListArticle' I got a typescript error

Type '{ articleCollection: ArticleCollection; }' is not assignable to type 'IntrinsicAttributes & ArticleCollection'.
  Property 'articleCollection' does not exist on type 'IntrinsicAttributes & ArticleCollection'

So before I was having a similar error on data, and this was saying that the 'data' doesn't exist in the data type, then I added data to the Data type declaration, and it solved. But now I am getting that the type articleCollection does not exist in the type articleCollection, if I tried to add it as well then again I am getting an error about, items does not exist and so on, so at the end I realized that actually that might not be the issue but something else with the type declaration, I also don't understand why in the response I get data.data. What I am doing wrong?

And just in case if I added all the "suggested" declaration at the end I get no typescript errors but the component does not work anywyays. So if someone can give me an idea of what's going on I will apprecciate it

And just in case for now my ListArticle receive a prop with type ArticleCollection as appears below:

import { ArticleCollection } from "../../../types/lib";

const ListArticle = (articleCollection: ArticleCollection) => {

  console.log(articleCollection);

  return <div>Test</div>;
};

export default ListArticle;