Repository: next.js
Issue: Custom wrapper component does not receive actual MDX content in props.children when using app router
Labels: bug,Markdown (MDX)

### Link to the code that reproduces this issue

https://github.com/LudoLogical/next-mdx-custom-wrapper-demo

### To Reproduce

1. `npx create-next-app@latest -e reproduction-template`
2. Follow the steps from App Router > Building Your Application > Configuring > MDX in the [docs](https://nextjs.org/docs/app/building-your-application/configuring/mdx):
   1. `npm install @next/mdx @mdx-js/loader @mdx-js/react @types/mdx`
   2. Create `/mdx-components.tsx` and add the following:

        ```tsx
        import type { MDXComponents } from 'mdx/types'

        export function useMDXComponents(components: MDXComponents): MDXComponents {
          return {
            ...components,
          }
        }
        ```

   3. Change `/next.config.js` to read as follows:

        ```js
        const withMDX = require('@next/mdx')()
         
        /** @type {import('next').NextConfig} */
        const nextConfig = {
          // Configure `pageExtensions` to include MDX files
          pageExtensions: ['js', 'jsx', 'mdx', 'ts', 'tsx'],
          // Optionally, add any other Next.js config below
        }
         
        module.exports = withMDX(nextConfig)
        ```

   4. Create `/app/test/page.mdx` and add the following:

        ```mdx
        # Welcome to my MDX page!
         
        This is some **bold** and _italics_ text.
         
        This is a list in markdown:
         
        - One
        - Two
        - Three
        ```

3. Edit `/mdx-components.tsx` to add a custom component definition for [`wrapper`](https://mdxjs.com/docs/using-mdx/#components):
   ```tsx
   import { type ReactElement, type ReactNode } from "react";
   import type { MDXComponents } from "mdx/types";
   
   export function useMDXComponents(components: MDXComponents): MDXComponents {
     return {
       wrapper: ({ children }: { children: ReactNode }) => {
         console.log(children);
         console.log((children as ReactElement).props.children);
         return children;
       },
       ...components,
     };
   }
   ```
4. `npm run dev` and navigate to `localhost:3000/test`

### Current vs. Expected behavior

### Current
The following is the result of the first `console.log()`:
```
{
  '$$typeof': Symbol(react.element),
  type: [Function: _createMdxContent],
  key: null,
  ref: null,
  props: { params: {}, searchParams: {} },
  _owner: null,
  _store: {}
}
```
The second `console.log()` outputs `undefined`.

### Expected
The behavior shown in "[The X in MDX](https://youtu.be/xEu3t-KJVVg?si=3OCdvFbgelt0lXNZ&t=71)," a short talk by Rodrigo Pombo on the Vercel YouTube channel. Note that the talk concerns the pages router, but the equivalent behavior is highly desirable in app router so that the effect that Pombo creates can be replicated. The console output should be something like what Pombo shows [here](https://youtu.be/xEu3t-KJVVg?si=JgkAjj7TVb8087h8&t=98) - i.e., it should be possible to manipulate the `ReactElement`s generated from the input MDX to, for example, create a table of contents from the headers.

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: 1.22.21
  pnpm: 8.10.5
Relevant Packages:
  next: 14.0.4-canary.17
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

App Router, MDX (@next/mdx)

### Additional context

Current workarounds:
1. For some use cases, you can write custom `remark` and/or `rehype` plugins as detailed [here](https://nextjs.org/docs/app/building-your-application/configuring/mdx#remark-and-rehype-plugins)
2. You can wrap an imported `<MyMDXContent />` `ReactElement` in a `div` and apply a callback ref in which you either manipulate the `Element`s directly or set a `useState()` variable whose contents are rendered if they exist with new `ReactElement`(s). (Of course, `useEffect()` with an empty dependency array can also be used to achieve this, but there can be some [problems](https://tkdodo.eu/blog/avoiding-use-effect-with-callback-refs) with that approach.)

Notably absent from this list is the use of a `layout.tsx` file, as `console.log()`ing the `children` prop there produces the same output shown in the "Current vs. Expected behavior" section above. The issue stems from the fact that the translation from MDX to React code has not yet taken place.

Possibly related reading (the potential fixes discussed within do not resolve this issue): 
- https://github.com/vercel/next.js/discussions/50897
- https://github.com/vercel/next.js/issues/57976