diff --git a/plugins/scaffolder-react/api-report-alpha.md b/plugins/scaffolder-react/api-report-alpha.md
index 57f97f2012..545cc02e9e 100644
--- a/plugins/scaffolder-react/api-report-alpha.md
+++ b/plugins/scaffolder-react/api-report-alpha.md
@@ -3,9 +3,12 @@
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
 ```ts
+/// <reference types="react" />
+
 import { ApiHolder } from '@backstage/core-plugin-api';
 import { ComponentType } from 'react';
 import { CustomFieldValidator } from '@backstage/plugin-scaffolder-react';
+import { Dispatch } from 'react';
 import { FieldExtensionOptions } from '@backstage/plugin-scaffolder-react';
 import { FieldValidation } from '@rjsf/utils';
 import { FormProps } from '@backstage/plugin-scaffolder-react';
@@ -22,6 +25,7 @@ import { ReviewStepProps } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderRJSFFormProps } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderStep } from '@backstage/plugin-scaffolder-react';
 import { ScaffolderTaskOutput } from '@backstage/plugin-scaffolder-react';
+import { SetStateAction } from 'react';
 import { StyleRules } from '@material-ui/core/styles/withStyles';
 import { TaskStep } from '@backstage/plugin-scaffolder-common';
 import { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
@@ -276,7 +280,7 @@ export const useFilteredSchemaProperties: (
 // @alpha
 export const useFormDataFromQuery: (
   initialState?: Record<string, JsonValue>,
-) => Record<string, JsonValue>;
+) => [Record<string, any>, Dispatch<SetStateAction<Record<string, any>>>];
 
 // @alpha (undocumented)
 export const useTemplateParameterSchema: (templateRef: string) => {
diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index 069512da5a..a1b31d0089 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -115,7 +115,7 @@ export const Stepper = (stepperProps: StepperProps) => {
   const apiHolder = useApiHolder();
   const [activeStep, setActiveStep] = useState(0);
   const [isValidating, setIsValidating] = useState(false);
-  const initialState = useFormDataFromQuery(props.initialState);
+  const [initialState] = useFormDataFromQuery(props.initialState);
   const [formState, setFormState] = useState<{
     [step: string]: Record<string, JsonValue>;
   }>();
@@ -123,6 +123,8 @@ export const Stepper = (stepperProps: StepperProps) => {
   const [errors, setErrors] = useState<undefined | FormValidation>();
   const styles = useStyles();
 
+  const makeStepKey = (step: string | number) => `step-${step}`;
+
   const backLabel =
     presentation?.buttonLabels?.backButtonText ?? backButtonText;
   const createLabel =
@@ -161,7 +163,7 @@ export const Stepper = (stepperProps: StepperProps) => {
     (e: IChangeEvent) => {
       setFormState(current => ({
         ...current,
-        [`step${activeStep}`]: e.formData,
+        [makeStepKey(activeStep)]: e.formData,
       }));
     },
     [setFormState, activeStep],
@@ -193,7 +195,10 @@ export const Stepper = (stepperProps: StepperProps) => {
         return stepNum;
       });
     }
-    setFormState(current => ({ ...current, [`step${activeStep}`]: formData }));
+    setFormState(current => ({
+      ...current,
+      [makeStepKey(activeStep)]: formData,
+    }));
   };
 
   const {
@@ -208,11 +213,11 @@ export const Stepper = (stepperProps: StepperProps) => {
     if (!formState) {
       return initialState;
     }
-    const { [`step${activeStep}`]: activeState, ...historicalState } =
+    const { [makeStepKey(activeStep)]: activeState, ...historicalState } =
       formState;
     const chronologicalState = {
       ...historicalState,
-      [`step${activeStep}`]: activeState,
+      [makeStepKey(activeStep)]: activeState,
     };
     return merge({}, ...Object.values(chronologicalState));
   }, [formState, activeStep, initialState]);
diff --git a/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts b/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts
index 777c615cd7..966a8fe8f4 100644
--- a/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts
+++ b/plugins/scaffolder-react/src/next/hooks/useFormDataFromQuery.ts
@@ -13,8 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { JsonValue } from '@backstage/types';
 import qs from 'qs';
+import { useState } from 'react';
 
 /**
  * This hook is used to get the formData from the query string.
@@ -22,18 +24,20 @@ import qs from 'qs';
  */
 export const useFormDataFromQuery = (
   initialState?: Record<string, JsonValue>,
-): Record<string, JsonValue> => {
-  if (initialState) {
-    return initialState;
-  }
+) => {
+  return useState<Record<string, any>>(() => {
+    if (initialState) {
+      return initialState;
+    }
 
-  const query = qs.parse(window.location.search, {
-    ignoreQueryPrefix: true,
+    const query = qs.parse(window.location.search, {
+      ignoreQueryPrefix: true,
+    });
+
+    try {
+      return JSON.parse(query.formData as string);
+    } catch (e) {
+      return {};
+    }
   });
-
-  try {
-    return JSON.parse(query.formData as string);
-  } catch (e) {
-    return {};
-  }
 };