Generate body from mdx file problem: Element type is invalid

Question

It tries to generate a body from an MDX file.

That's look my OffersSingle template query:

 export const query = graphql`
  query OffersSingle($slug: String!) {
    mdx(frontmatter: { slug: { eq: $slug } }) {
      body
      frontmatter {
        position
        jobResponsibilitiesText
        niceToHaveText
      }
    }
  }
`;

In the same file, I want to render this body like this:

<article>
            <MDXRenderer>
              <div
                className="post-body"
                dangerouslySetInnerHTML={{ __html: body }}
              />
            </MDXRenderer>
          </article>

destructuring:

const OffersSingle = ({ data }) => {
      const { position, jobResponsibilitiesText, niceToHaveText } =
        data.mdx.frontmatter;
    
      const { body } = data.mdx;

Could anyone help me? I want to render body in my jsx file. What can I do to resolve this problem?

Now i have that error: look at image