diff --git a/packages/docs/content/docs/custom-previews.mdx b/packages/docs/content/docs/custom-previews.mdx
index 92680184..aaf58810 100644
--- a/packages/docs/content/docs/custom-previews.mdx
+++ b/packages/docs/content/docs/custom-previews.mdx
@@ -43,8 +43,9 @@ The following parameters will be passed to your `react_component` during render:
 <CodeTabs>
 
 ```js
-const PostPreview = ({ widgetFor, entry, collection, field }) => {
-  const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
+const PostPreview = ({ widgetFor, entry, collection, fields }) => {
+  const imageField = fields.find((field) => field.name === 'image');
+  const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return h(
     'div',
@@ -61,8 +62,9 @@ CMS.registerPreviewTemplate('posts', PostPreview);
 ```jsx
 import CMS, { useMediaAsset } from '@staticcms/core';
 
-const PostPreview = ({ widgetFor, entry, collection, field }) => {
-  const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
+const PostPreview = ({ widgetFor, entry, collection, fields }) => {
+  const imageField = fields.find((field) => field.name === 'image');
+  const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return (
     <div>
@@ -94,9 +96,10 @@ const PostPreview = ({
   widgetFor,
   entry,
   collection,
-  field,
+  fields,
 }: TemplatePreviewProps<Post>) => {
-  const imageUrl = useMediaAsset(entry.data.image, collection, field, entry);
+  const imageField = fields.find((field) => field.name === 'image');
+  const imageUrl = useMediaAsset(entry.data.image, collection, imageField, entry);
 
   return (
     <div>
diff --git a/packages/docs/content/docs/typescript.mdx b/packages/docs/content/docs/typescript.mdx
index eb9af9b6..dba71b9d 100644
--- a/packages/docs/content/docs/typescript.mdx
+++ b/packages/docs/content/docs/typescript.mdx
@@ -57,7 +57,7 @@ import type { HtmlField } from '../config';
 const EditorControl: FC<WidgetControlProps<string, HtmlField>> = ({
   field, // Typed as a HtmlField
   value, // Typed as string | null | undefined
-  onChange,
+  onChange, // Typed to accept string | null | undefined
   openMediaLibrary,
   mediaPaths
 }) => {
@@ -101,10 +101,16 @@ interface PostPreviewData {
   tags?: string[];
 }
 
-const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({ entry, widgetFor, collection, field }) => {
+const PostPreview: FC<TemplatePreviewProps<PostPreviewData>> = ({
+  entry, // Typed as PostPreviewData
+  widgetFor, // Typed to accept only the keys of PostPreviewData (body, date, title, image, slug, tags)
+  collection,
+  fields
+}) => {
   const dateString = useMemo(() => entry.data.date, [entry.data.date]);
 
-  const image = useMediaAsset(entry.data.image ?? '', collection, field, entry);
+  const imageField = fields.find((field) => field.name === 'image');
+  const image = useMediaAsset(entry.data.image ?? '', collection, imageField, entry);
 
   return (
     <div>