How to render components exported from mdx in Astrojs?

I got a mdx file like this and I want to render the foo component in somewhere else.

---
title: Hi, World!
---

export const title = 'My first MDX post'
export const foo = <h1>adsf</h1>

# {title}

by

---
const matches = await Astro.glob('../../content/blog/*.mdx');

const foo = matches[0].foo
---

I got

{
  'astro:jsx': true,
  type: 'h1',
  props: { children: "adsf" },
  [Symbol(astro:renderer)]: 'astro:jsx'
}

Is it possible to render it in .astro? both {foo} and <foo/> not works