rehype-mdx-code-props is not working correctly with nextjs app router

I’m using nextjs 14, using app router.
I was trying to use the mdx in nextjs, for creating documentation in which I require to add code blocks for reference.
now I found that rehype-mdx-code-props can help on passing the props to my component.

```js filename="demo.js" filetype="js"
function sayHello(name) {
  console.log('Hello', name);
}
```

And in the mdx-components.tsx which is inside the src folder I’ve written this:

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: ({ children }) => (
      <h1 className="text-3xl font-bold tracking-tight">{children}</h1>
    ),
    img: (props) => (
      <Image
        sizes="100vw"
        style={{ width: "100%", height: "auto" }}
        {...(props as ImageProps)}
      />
    ),
    code: ({children}) => {
        return <MyCodeBlock children={children} />;
    },
    p: ({ children }) => (
      <p className="text-sm text-muted-foreground">{children}</p>
    ),
    ...components,
  };
}

problem is the line code: ({children}) part, here I tried to do the console log for the props being passed but only children and classname is being passed as props, so this is causing filename and filetype arguments not getting passed to component.

How do I get filename and filetype as arguments to my method?

for ref next.config.mjs:

import createMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'
import rehypeMdxCodeProps from 'rehype-mdx-code-props'

/** @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
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeMdxCodeProps],
    },
})
 
// Merge MDX config with Next.js config
export default withMDX(nextConfig)