MDX+Next.js (app router) TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it

I was trying to create a boilerplate for Next.js + MDX (https://mdxjs.com/) using the official guide provided on Next.js website (https://nextjs.org/docs/app/guides/mdx) and I have been facing this error

 ⨯ TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
    at __webpack_require__ (.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(rsc)/./app/pg/page.mdx:7:85)
    at <unknown> (rsc)/./app/pg/page.mdx (/home/baltej/Desktop/files/posts/.next/server/app/pg/page.js:33:1)
    at Function.__webpack_require__ (.next/server/webpack-runtime.js:33:42) {
  page: '/pg'
}
 GET /pg 500 in 501ms

I am using App router + Nextjs

My next.config.js

import createMDX from '@next/mdx'
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  // Configure `pageExtensions` to include markdown and MDX files
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  // Optionally, add any other Next.js config below
}
 
const withMDX = createMDX({
  // Add markdown plugins here, as desired
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)

My source Tree:

.
├── app
│   ├── layout.js
│   ├── md-components.js
│   └── pg
│       └── page.mdx
├── eslint.config.mjs
├── jsconfig.json
├── next.config.js
├── package.json
├── package-lock.json
├── public
│   ├── file.svg
│   ├── globe.svg
│   ├── next.svg
│   ├── vercel.svg
│   └── window.svg
└── README.md

This happens because createContext (React Context API) can only be used inside Client Components in Next.js App Router, but your .mdx file is treated as a server component by default.

So To fix that problem, you need to mark your MDX content or the components using React context as Client Components by adding the "use client" directives at the top of the file.