gatsby-plugin-mdx: `createPage` using `...?__contentFilePath` does not work for react class components

Preliminary Checks

[ ] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

This has been raised in https://github.com/gatsbyjs/gatsby/issues/37777 but I cannot reopen that issue and the original author asked me to open a new issue.

The issue concerns gatsby-plugin-mdx and using the createPage() API with the ?__contentFilePath= modifier. It works fine as documented on the website using functional template component. However it does not work when using a react class component.

Reproduction Link

https://github.com/krischer/gatsby-mdx-bug-minimal/

Steps to Reproduce

Open /trial and it will work using a functional react component.
Edit https://github.com/krischer/gatsby-mdx-bug-minimal/blob/main/src/templates/template.tsx and comment the functional component and uncomment the class component.
Reopen /trial and it will no longer show the contents of the mdx file. this.props.children is undefined.

Expected Result

I would expect that the functional and the class components behave the same and that props.children/this.props.children has the appropriate content.

Actual Result

this.props.children is empty for class components.

Environment

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
  Languages:
    Python: 3.10.6 - /home/lion/.mambaforge/bin/python
  npmPackages:
    gatsby: ^5.11.0 => 5.11.0 
    gatsby-plugin-mdx: ^5.11.0 => 5.11.0

Config Flags

No response

I was using simple markdown (gatsby-transformer-remark) for writing content. But now I want to use advanced markdown (gatsby-plugin-mdx). So I decided to migrate my gatsby app from version 3 to version 5. I successfully migrated the gatsby app. But when trying to migrate remark to mdx, I'm facing critical issues like fileAbsolutePath word doesn't exist, not getting body content of the .md file with children props and not sure what to use for styling markdown content after removing dangerouslySetInnerHTML.

Also facing this issue

Invalid left-hand side in prefix operation. (1:2)

> 1 | ---
    |   ^
  2 | title: Understanding Inline, Inline-Block, and Block Elements in HTML
  3 | description: Unlock the secrets of inline, inline-block, and block elements in HTML
  4 | date: 2023-07-02

gatsbyjs / gatsby