Describe the bug
To create a custom component, I followed the FAQ from the repo - “custom-mdx-component”. And I get the following error - Server is reporting that use client does not appear in the file, which is incorrect: “ useRef only works in Client Components. Add the "use client" directive at the top of the file to use it”

To Reproduce
Steps to reproduce the behavior:

1. I added DonutChart.tsx file to the components folder,
2. I inserted use client to the1st line of the file to make the component a React Client Component so that useRef is allowed
3. in the last line of DonutChart.tsx I exported the custom component - export default DonutChart,
4. Added component to MDXComponents.tsx
5. Created MDX file to use DonutChart

Expected behavior
Expect custom component - DonutChart to render in the MDX page without error

Screenshots
What I should see -

Test component file -

Error message - runtime error

System Info (if dev / build issue):

• OS: MacOS
• Node version 18.5.0
• Npm version 9.2.0

Browser Info (if display / formatting issue):

• Device [e.g. Desktop, iPhone6]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.