GatsbyJS and graphql - Cannot read properties of undefined (reading 'mdx')

Question

I have the following folder structure:

• pages
  • index.js
  • about.js
  • archive
    • index.js
    • docu-{mdx.frontmatter__key}-{mdx.frontmatter__slug}.js
    • components
      • single-docu-sections
        • overview
          • overview.js
          • index.js

in docu-{mdx.frontmatter__key}-{mdx.frontmatter__slug}.js I have the following:

import * as React from 'react'
import Layout from '../../components/layout/layout'
import SingleDocuLayout from './components/single-docu-layout/single-docu-layout'
import Seo from '../../components/seo'
import { graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'

const SingleDocu = ({ data, children }) => {
  const image = getImage(data.mdx.frontmatter.heroImage)
  return (
    <Layout pageTitle={data.mdx.frontmatter.title}>
      <p>Posted: {data.mdx.frontmatter.date}</p>
    <GatsbyImage
      image={image}
      alt={data.mdx.frontmatter.heroImageAlt}
    />
      {children}
      <SingleDocuLayout />
    </Layout>
  )
}

export const query = graphql`
  query($id: String) {
    mdx(id: {eq: $id}) {
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        heroImageAlt
        heroImage {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }

export const Head = ({ data }) => <Seo title={data.mdx.frontmatter.title} />

export default SingleDocu`

and here I can get the data from the files.

In overview.js I have the following code:

import * as React from 'react'
import { useStaticQuery,graphql } from 'gatsby'
import { GatsbyImage, getImage } from 'gatsby-plugin-image'


import {
  Wrapper,
  BackgroundAsset,
  BackgroundImage, 
} from "./style";

const Overview = ({ data, children }) => {
  
  const query = useStaticQuery(graphql`
  query {
    mdx{
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        heroImageAlt
        heroImage {
          childImageSharp {
            gatsbyImageData
          }
        }
      }
    }
  }
`)
  const image = getImage(data.mdx.frontmatter.heroImage)
  return (
    <>
    "overview"
    </>
   /*  <Wrapper data-testid="overview">
    <BackgroundAsset>
      <BackgroundImage>
        <GatsbyImage
          //image={image}
          //alt={data.mdx.frontmatter.heroImageAlt}
        />
      </BackgroundImage>
    </BackgroundAsset>
    
  </Wrapper> */
  )
}

export default Overview

Trying with or without useStaticQuery I get the following error: Cannot read properties of undefined (reading 'mdx') ./src/pages/archive/components/single-docu-sections/overview/overview.js:30

28 | } 29 | `)

30 | const image = getImage(data.mdx.frontmatter.heroImage) | ^ 31 | return ( 32 | <> 33 | "overview"

Can someone help me to fix this? Thanks

I would like to know how I can get data successfully. I tried graphql query using useStaticQuery and without but get the same error