diff --git a/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx b/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx
index 550d49f1ad..96fe8573e9 100644
--- a/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx
+++ b/packages/documentation/src/components/Demos/Form/FileInputs/SimpleFileUpload.tsx
@@ -45,8 +45,8 @@ export default function SimpleFileUpload(): ReactElement | null {
         {stats.map(({ key, ...uploadStat }, i) => (
           <PreviewFile
             id={`simple-file-upload-preivew-${i + 1}`}
-            {...uploadStat}
             key={key}
+            {...uploadStat}
             fileKey={key}
             remove={remove}
           />
diff --git a/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx b/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx
index 473a5b2f2b..bb84de6694 100644
--- a/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx
+++ b/packages/documentation/src/components/Demos/Form/SelectFields/NativeSelectExample.tsx
@@ -69,8 +69,8 @@ export default function NativeSelectExample(): ReactElement {
       }) => (
         <NativeSelect
           id="configurable-native-select"
-          {...props}
           key={`${optgroup}-${multiple}`}
+          {...props}
           label={label}
           icon={icon ? undefined : null}
           size={multiple ? parseInt(size, 10) : undefined}
diff --git a/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx b/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx
index 1f1ef21cd3..a258120168 100644
--- a/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx
+++ b/packages/documentation/src/components/Demos/Form/SelectionControls/MenusWithFormControls.tsx
@@ -45,8 +45,8 @@ export default function MenusWithFormControls(): ReactElement | null {
         ...values.map((value, i) => (
           <MenuItemCheckbox
             id={`some-group-id-${i + 1}`}
-            {...getProps(value)}
             key={value}
+            {...getProps(value)}
           >
             {labels[value]}
           </MenuItemCheckbox>
diff --git a/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx b/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx
index edd0df6d5e..1375ec74fe 100644
--- a/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx
+++ b/packages/documentation/src/components/Demos/Form/TextFields/TextAreaExample.tsx
@@ -34,8 +34,8 @@ export default function TextAreaExample(): ReactElement {
       renderField={(props) => (
         <TextArea
           id="configurable-textarea"
-          {...props}
           key={`${rows}-${resize}`}
+          {...props}
           rows={rowsInt}
           maxRows={maxRowsInt}
           resize={resize}