diff --git a/examples/with-mdx/src/components/Counter.jsx b/examples/with-mdx/src/components/Counter.jsx
index a23cd96c31cb..801eefe733cd 100644
--- a/examples/with-mdx/src/components/Counter.jsx
+++ b/examples/with-mdx/src/components/Counter.jsx
@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks';
 
-export function Counter({ children }) {
+export default function Counter({ children }) {
 	const [count, setCount] = useState(0);
 	const add = () => setCount((i) => i + 1);
 	const subtract = () => setCount((i) => i - 1);
diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx
index a19abc27fb52..13a929624bf8 100644
--- a/examples/with-mdx/src/pages/index.mdx
+++ b/examples/with-mdx/src/pages/index.mdx
@@ -1,4 +1,4 @@
-import * as c from '../components/Counter';
+import Counter from '../components/Counter.jsx';
 import Title from '../components/Title.astro';
 export const components = { h1: Title };
 
@@ -14,10 +14,7 @@ Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}.
 
 Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}.
 
-
-export const value = () => console.log(c);
-
-<c.Counter client:idle>This is a **counter**!</c.Counter>
+<Counter client:idle>This is a **counter**!</Counter>
 
 ## Syntax highlighting