Cannot render MDX body in react node with Gatsby

Question

I have a gatsby website that is using mdx as section instead of pages. I thought this should be simple. I can query all the sections with graphQL

query HomePageQuery {
    allMdx(filter: {fields: {source: {eq: "section"}}}) {
      edges {
        node {
          id
          fields {
            source
          }
          frontmatter {
            graphic
            title
          }
          body
        }
      }
    }
  }

And then render them on the page:

const IndexPage = ({data}) => {

  const sections = data.allMdx && data.allMdx.edges.map((node)=> {
    return <Section {...node} />
  })
  
  return <main>{sections}</main>
}

const Section = ({frontmatter, body}) => {
  console.log(body);
  return (
    <section>
       <h1>{frontmatter.title}</h1>
       {body}
    </section>
  )
}

The problem comes in the <Section /> component, the body is just raw mdx. How do I get the properly formatted content of an MDX node? In the past it seems like I could do this with the <MDXRenderer/> component but that doesnt exist anymore?

https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#graphql-mdx-node-structure

The documentation seems to say there should be a automatic property children but this doesn't seem to exist on query thats I do and not ones automaticly done by gatsby.

Am I doing this completely wrong?