Problems with GraphQL and TypeScript when I map data to components

I'm making an SSR with GraphQL and Next.js but I have a problem when I try to map some data.

I'm bringing some data from Github GraphQL API (Followers, Following, Public Repos) and when I pass this data to the code all my data works fine. But when I try to map my Showcase Repos to print on screen, the problems starts, anyone can help me?

My stack at this moment is GraphQL (GraphQl-request), Next.js, styled-components and TypeScript.

This is my query:

  fragment totalFollowing on User {
    following(first: 1) {
      totalCount
    }
  }

  fragment totalFollowers on User {
    followers(first: 1) {
      totalCount
    }
  }

  fragment totalRepositories on User {
    repositories(affiliations: OWNER, first: 1) {
      totalCount
    }
  }

  fragment showcase on User {
    itemShowcase {
      items(first: 10) {
        nodes {
          ... on Repository {
            name
            description
            url
          }
        }
      }
    }
  }

  query GET_GITHUB_QUERIES {
    viewer {
      ...totalFollowing
      ...totalFollowers
      ...totalRepositories
      ...showcase
    }
  }

and this is my types at moment:

export type FollowingProps = {
  totalCount: number
}

export type FollowersProps = {
  totalCount: number
}

export type RepositoriesProps = {
  totalCount: number
}

export type itemShowCaseProps = {
  itemShowcase: {
    items: {
      nodes: [
        {
          name: string
          description: string
          url: string
        }
      ]
    }
  }
}

export type QueryProps = {
  following: FollowingProps
  followers: FollowersProps
  repositories: RepositoriesProps
  itemShowcase: itemShowCaseProps
}

My call on index.tsx

export const getStaticProps: GetStaticProps = async () => {
  const { viewer } = await client.request(query)

  return {
    props: {
      ...viewer
    }
  }
}

Still on my index.tsx, i have this component where i need to pass the data:

      <S.MyWorkSection id="my-work" data-aos="fade-up">
        <MyWorkGithub
          repositories={repositories}
          following={following}
          followers={followers}
          {...{ itemShowcase }}
        />
      </S.MyWorkSection>

And finaly this is my component:

const MyWorkGithub: React.FC<QueryProps> = ({
  following,
  followers,
  repositories,
  itemShowcase
}) => (
  <>
    <Title text="Works" icon={true} />
    <S.HighLightWrapper>
      <HighLightCard
        hlNumber={repositories.totalCount}
        hlDescription={'repositories'}
      />
      <HighLightCard
        hlNumber={followers.totalCount}
        hlDescription={'followers'}
      />
      <HighLightCard
        hlNumber={following.totalCount}
        hlDescription={'following'}
      />
    </S.HighLightWrapper>
    <S.CardWrapper>
      {itemShowcase.itemShowcase.items.nodes.map((repo, index) => (
        <CardComponent
          key={index}
          url={repo.url}
          name={repo.name}
          description={repo.description}
        />
      ))}
    </S.CardWrapper>
  </>
)

this is my error:

TypeError: cannot read property 'items' of undefined
<SCardWrapper>
  {itemShowcase.itemShowcase.items.node.map((repo, index) => (
...

https://i.imgur.com/LzOmb2z.png

Other datas like repositories, followers and following still works fine.

Edit: When I put on Github Explorer, all data is fine.