diff --git a/docs/admin/hooks.mdx b/docs/admin/hooks.mdx
index 3b008da70..2886eb85f 100644
--- a/docs/admin/hooks.mdx
+++ b/docs/admin/hooks.mdx
@@ -21,10 +21,11 @@ To do so, import the `useField` hook as follows:
 
 ```tsx
 'use client'
+import type { TextFieldClientComponent } from 'payload'
 import { useField } from '@payloadcms/ui'
 
-const CustomTextField: React.FC = () => {
-  const { value, setValue, path } = useField() // highlight-line
+export const CustomTextField: TextFieldClientComponent = ({ path }) => {
+  const { value, setValue } = useField({ path }) // highlight-line
 
   return (
     <div>