or are you trying to render an mdx code right into an element or something?

I wanted to render an MDX inside a react element, not just rendering it as a page

something like

function Product({name,description,price,img}:{name: string, description: string, price:number,img:string}){

return (
    <h1> {name} </h1>
    <img src={img}/>
    <MarkdownRender markdown={description}/>
    <p> {price} </p>
  )
}

The set up guide above still helps. Just follow the guide and you can then import the mdx

import Welcome from '@/markdown/welcome.mdx'
 
export default function Page() {
  return <Welcome />
}

I use marked for this. Basically:

const html_version = marked.parse(markdown_version);

Then where you need it,

<div dangerouslySetInnerHTML={{ __html: html_version }} />

If you have concerns about the markdown possibly having embedded HTML, you should sanitize the generated HTML using DOMPurify

thanks everyone for the help, I'll try to implement the suggestion...