Repository: next.js
Issue: Using MDXProvider with mdx-components.tsx
Labels: bug,Markdown (MDX)

### Link to the code that reproduces this issue

https://github.com/ProchaLu/next-js-mdx-provider

[CodeSandbox](https://codesandbox.io/p/devbox/github/ProchaLu/next-js-mdx-provider/tree/main/?file=%2Fapp%2FMDXComponent.tsx)

### To Reproduce

1. Clone repro, `git clone https://github.com/ProchaLu/next-js-mdx-provider` 
2. install dependencies
3. run development server

### Current vs. Expected behavior

I'm trying to use both `mdx-components.tsx` and `MDXProvider` together (like [the nested `MDXProvider` pattern](https://mdxjs.com/docs/using-mdx/#:~:text=When%20MDXProviders%20are%20nested%2C%20their%20components%20are%20merged.%20Take%20this%20example%3A)). Our constraints are as follows:
1. our app is large with multiple areas - different areas should receive different MDX `components`
2. we are trying to avoid [prop drilling - having to pass `components={props.components}` in every MDX file](https://nextjs.org/docs/app/building-your-application/configuring/mdx#local-styles-and-components) where we import another MDX file, eg. trying to avoid this:
   
   ```mdx
   import Child from './child.mdx'
   {/* Trying to avoid this */}
   <Child components={props.components} />
   ```
   
 ### Current Behavior
When using the MDXProvider in `MDXComponent.tsx` to provide custom components (h3 and h4), these components are not applied to the MDX content. Instead, only the global components defined in `mdx-components.tsx` (for h1 and h2) are applied.

`mdx-components.tsx`

```tsx
const components = {
  h1: ({ children, ...props }: HTMLAttributes<HTMLHeadElement>) => (
    <h1 style={{ color: 'tomato' }} {...props}>
      {children}
    </h1>
  ),
  h2: ({ children, ...props }: HTMLAttributes<HTMLHeadElement>) => (
    <h2 style={{ color: 'blue' }} {...props}>
      {children}
    </h2>
  ),
} satisfies MDXComponents;

declare global {
  type MDXProvidedComponents = typeof components;
}
// eslint-disable-next-line no-undef
export function useMDXComponents(): MDXProvidedComponents {
  return components;
}
```

`MDXComponent.tsx` 

```tsx
'use client';

import { MDXProvider } from '@mdx-js/react';
import { MDXComponents } from 'mdx/types';
import { HTMLAttributes } from 'react';
import Content from './message.mdx';

const components = {
  h3: ({ children, ...props }: HTMLAttributes<HTMLHeadElement>) => (
    <h3 style={{ color: 'purple' }} {...props}>
      {children}
    </h3>
  ),
  h4: ({ children, ...props }: HTMLAttributes<HTMLHeadElement>) => (
    <h4 style={{ color: 'yellow' }} {...props}>
      {children}
    </h4>
  ),
} satisfies MDXComponents;

export default function MDXComponent() {
  return (
    <MDXProvider components={components}>
      <Content />
    </MDXProvider>
  );
}
```

<img width="339" alt="Screenshot 2024-09-03 at 14 04 07" src="https://github.com/user-attachments/assets/903d3e84-0033-40d7-a7fe-ef7f4b894daf">

 
### Expected Behavior

The `MDXProvider` in `MDXComponent.tsx` should apply its locally defined custom components (h3 and h4) to the MDX content. 

- h1 and h2 should get their styles from the global `mdx-components.tsx`.
- h3 and h4 should get their styles from the local `MDXProvider` in `MDXComponent.tsx`.

This would allow for a more flexible and modular approach where different sections of the application can have different MDX component configurations without the need for prop drilling or defining all components globally.
   
However, it appears that this is not supported in the Next.js MDX integration:
- https://github.com/vercel/next.js/issues/54212#issuecomment-1803973892
- https://github.com/vercel/next.js/pull/69609

Are there any suggestions for providing custom MDX `components` in different app areas without manually prop drilling?

### Provide environment information

```bash
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:19:05 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T8112
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: N/A
  pnpm: 9.4.0
Relevant Packages:
  next: 14.2.7 // Latest available version is detected (14.2.7).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.5.2
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Markdown (MDX)

### Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

### Additional context

_No response_