Problem of fetching data of content relatioinship using GraphQuery

Hello,
I followed the tutorial on creating a two-level nested menu how to model a second-level nested submenu in my Next.js project.
Additionally, I read through the thread on Mega menu and the documentation on GraphQuery API.

Despite reading through all these resources, I still encounter difficulties in fetching data from related documents using GraphQuery.
Here's the structure of my project (almost identical to the tutorial except the structure of Submenu custom type document ):

Layout (singular custom document)
       -  Header (Tab)
                - MenuItem (slice with 2 variations) 
                      - Default (variation 1: menu without submenu)
                      - WithSubmenu (variation 2)
                           - Submenu (content relationship field, linked to a reusable custom type called Submenu)

Submenu (reusable custom type)
        -  Main (Tab)
            - UID field 
            - Key text field
        - Dates (Tab)
            - Group field

My Next.js project structure :

- App
   - components 
      - Header.tsx (parent)
      - Navigation.tsx (child)
  - getData.tsx

I attempt to retrieve data in getDatas.tsx


import { createClient } from "@/prismicio"

export async function getLayoutData() {
  const client = createClient();
  const layoutData = await client.getSingle('layout', {
    graphQuery:`{
        layout {
            slices{
              ...on menu_item{
                variation {
                  ...on withSubmenu{
                    primary {
                      submenu{
                        ...on submenu{
                          ...submenuFields
                        }
                      }
                    }
                  }
                }
              }
            }
        }
    }`
  });
 
  return layoutData;
}

In Header.tsx, I attempt to fetch the data, but I'm unable to access the Submenu content relationship field:

import { getLayoutData } from "@/app/getDatas";

export default async function Header() {
  const layoutdata = await getLayoutData();

// Here I want to expand the data to see if the query worked, but I can't access the submenu's data

 layoutdata.data.slices.map((item, index)=>{
    if(item.variation==='withSubmenu'){
      console.log(item.primary.submenu)
    }
  })
  return (
    <>
      <Navigation layoutdata={layoutdata} />
    </>
  );
}

the console.log will return my submenu document's data, but I don't have access to it:

{
  id: 'ZjO96BIAAKpJ5s5q',
  type: 'submenu',
  tags: [],
  lang: 'fr-fr',
  slug: '-',
  first_publication_date: '2024-05-02T16:23:37+0000',
  last_publication_date: '2024-05-02T16:24:36+0000',
  uid: 'travaux_submenu',
  data: {
    all: 'all',
    date: [ [Object], [Object], [Object] ],
    uid: 'travaux_submenu',
  },
  link_type: 'Document',
  isBroken: false
}

What I hope to get is something like this : console.log(item.primary.submenu.data.uid)
But the only option below item.primary.submenu is link_type, seems like I didn't well destructured the data inside the graphQuery, but my developper tool didn't throw any error at that part, I don't quite understand.

Thanks for the hlep!