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

The problem consists of 2 parts.

1. Despite what the docs say, @mdx-js/react is incompatible with Next.js app directory. This is a bug in the documentation. Uninstall it.

2. The mdx-components.js file should be placed in the source root (project root or /src).