diff --git a/docs/start/framework/react/guide/rendering-markdown.md b/docs/start/framework/react/guide/rendering-markdown.md
index 69a6cb4ca4b..509f1375ea3 100644
--- a/docs/start/framework/react/guide/rendering-markdown.md
+++ b/docs/start/framework/react/guide/rendering-markdown.md
@@ -86,8 +86,14 @@ Create a React component that renders the processed HTML with custom element han
 
 ```tsx
 // src/components/Markdown.tsx
-import parse, { type HTMLReactParserOptions, Element } from 'html-react-parser'
-import { renderMarkdown, type MarkdownResult } from '~/utils/markdown'
+import parse, {
+  type HTMLReactParserOptions,
+  domToReact,
+  Element,
+} from 'html-react-parser'
+import { renderMarkdown, type MarkdownResult } from '@/lib/markdown'
+import { useEffect, useState } from 'react'
+import { Link } from '@tanstack/react-router'
 
 type MarkdownProps = {
   content: string
@@ -156,6 +162,7 @@ Create a `content-collections.ts` file in your project root:
 // content-collections.ts
 import { defineCollection, defineConfig } from '@content-collections/core'
 import matter from 'gray-matter'
+import { z } from 'zod'
 
 function extractFrontMatter(content: string) {
   const { data, content: body, excerpt } = matter(content, { excerpt: true })
@@ -166,9 +173,9 @@ const posts = defineCollection({
   name: 'posts',
   directory: './src/blog', // Directory containing your .md files
   include: '*.md',
-  schema: (z) => ({
+  schema: z.object({
     title: z.string(),
-    published: z.string().date(),
+    published: z.date(),
     description: z.string().optional(),
     authors: z.string().array(),
   }),