How can I import mdx file using NextJS router

Question

I want to get MDX file data according to the routers (if the file MDX is present with that name) for example

domain.com/test
domain.com/focus
domain.com/space

So, the code will check if the files are present inside the mdx-pages folder such as

test.mdx
focus.mdx
space.mdx

But, I am currently facing the issue that my code gives me the following error

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

Below is my code link

https://pastebin.com/epQ3Ldyn

Also, I am a bit confused about where to put the routing and fetching code

Note:- I am using NEXT JS 14, MDX, and Gray Matter.

Updated :

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)

My MDX FILE -> https://pastebin.com/89A6QRwD