diff --git a/docs/features/software-templates/writing-custom-field-extensions.md b/docs/features/software-templates/writing-custom-field-extensions.md
index 4f2d3bdf5d..ebb7af4398 100644
--- a/docs/features/software-templates/writing-custom-field-extensions.md
+++ b/docs/features/software-templates/writing-custom-field-extensions.md
@@ -27,20 +27,27 @@ You can create your own Field Extension by using the
 
 ```tsx
 //packages/app/scaffolder/MyCustomExtension/MyCustomExtension.tsx
+import React from 'react';
 import { FieldProps, FieldValidation } from '@rjsf/core';
+import FormControl from '@material-ui/core/FormControl';
 import { KubernetesValidatorFunctions } from '@backstage/catalog-model';
 /*
  This is the actual component that will get rendered in the form
 */
-export const MyCustomExtension = ({ onChange, required }: FieldProps<string>) => {
+export const MyCustomExtension = ({
+  onChange,
+  rawErrors,
+  required,
+  formData,
+}: FieldProps<string>) => {
   return (
-     <FormControl
+    <FormControl
       margin="normal"
       required={required}
       error={rawErrors?.length > 0 && !formData}
       onChange={onChange}
-    >
-  )
+    />
+  );
 };
 
 /*
@@ -63,10 +70,10 @@ export const myCustomValidation = (
 ```tsx
 // packages/app/scaffolder/MyCustomExtension/extensions.ts
 
-/* 
+/*
   This is where the magic happens and creates the custom field extension.
 
-  Note that if you're writing extensions part of a separate plugin, 
+  Note that if you're writing extensions part of a separate plugin,
   then please use `plugin.provide` from there instead and export it part of your `plugin.ts` rather than re-using the `scaffolder.plugin`.
 */