Can't import the react client component in mdx files.

[annder]

Describe the bug When I wrote a simple counter component and imported it into the mdx file to render as content, Nextjs said that the component was not supported.

To Reproduce Steps to reproduce the behavior:

1. Create an mdx file in the data/blog fold and write some text, the content is filled in casually.
2. Create a react component named test.tsx and write content like：

'use client'

import { useState } from 'react'

const Index = () => {
  const [counter] = useState(0)
  return <div>{counter}</div>
}

export default Index

3. import the component path into mdx file like this:

import Test from "@/components/Test.tsx"

<Test />

5. And Nextjs will throw the error saying:useState 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/react-client-hook-in-server-component

Expected behavior Successfully imported the component into mdx file and rendered it on the browse.

Screenshots If applicable, add screenshots to help explain your problem.

System Info (if dev / build issue):

• OS: Windows
• Node version：20.17.0
• Npm version：10.8.2
• Next version：14.2.3

Browser Info (if display / formatting issue):

• Device PC
• Browser： Chrome
• Version ：128.0.6613.120

Additional context I found the same issue in the nextjs issues, but During I attempt to search mdx-components.mdx file, all of the dirs can't be found. https://github.com/vercel/next.js/issues/47523