Update MDX document (vercel#33916)

This PR added about `providerImportSource` option, which we need to specify in `next.config.js` to use `MDXProvider`. 


Related mdx documents: https://mdxjs.com/docs/using-mdx/#mdx-provider

> To solve this, a context can be used in React, Preact, and Vue. Context provides a way to pass data through the component tree without having to pass props down manually at every level. Set it up like so:
> 1.  Install either @mdx-js/react, @mdx-js/preact, or @mdx-js/vue, depending on what framework you’re using
> 1. Configure your MDX integration with options.providerImportSource set to that package, so either '@mdx-js/react', '@mdx-js/preact', or '@mdx-js/vue'
> 1. Import MDXProvider from that package. Use it to wrap your top-most MDX content component and pass it your components instead:

Because my English skills are not high, feel free to improve my sentences.

## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [x] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `yarn lint`


Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>

docs/advanced-features/using-mdx.md

@@ -46,6 +46,8 @@ The following steps outline how to setup `@next/mdx` in your Next.js project:
      options: {
        remarkPlugins: [],
        rehypePlugins: [],
+       // If you use `MDXProvider`, uncomment the following line.
+       // providerImportSource: "@mdx-js/react",
      },
    })
    module.exports = withMDX({
@@ -153,7 +155,7 @@ The above generates the following `HTML`:
 </ul>
 ```
 
-When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name.
+When you want to style your own elements to give a custom feel to your website or application, you can pass in shortcodes. These are your own custom components that map to `HTML` elements. To do this you use the `MDXProvider` and pass a components object as a prop. Each object key in the components object maps to a `HTML` element name. You also need to specify `providerImportSource: "@mdx-js/react"` in `next.config.js`.
 
 ```jsx
 // pages/index.js