diff --git a/CommonUI/src/Components/Forms/BasicForm.tsx b/CommonUI/src/Components/Forms/BasicForm.tsx
index 4f5b2257b75..6f52fd115f8 100644
--- a/CommonUI/src/Components/Forms/BasicForm.tsx
+++ b/CommonUI/src/Components/Forms/BasicForm.tsx
@@ -288,22 +288,25 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
 
                 props.onSubmit(values);
             } else if (props.steps && props.steps.length > 0) {
-                const currentStepIndex: number = props.steps.findIndex(
+                const steps: Array<FormStep<T>> = props.steps.filter(
+                    (step: FormStep<T>) => {
+                        if (!step.showIf) {
+                            return true;
+                        }
+
+                        return step.showIf(refCurrentValue.current);
+                    }
+                );
+
+                const currentStepIndex: number = steps.findIndex(
                     (step: FormStep<T>) => {
                         return step.id === currentFormStepId;
                     }
                 );
+
                 if (currentStepIndex > -1) {
                     setCurrentFormStepId(
-                        (
-                            props.steps.filter((step: FormStep<T>) => {
-                                if (!step.showIf) {
-                                    return true;
-                                }
-
-                                return step.showIf(refCurrentValue.current);
-                            })[currentStepIndex + 1] as FormStep<T>
-                        ).id
+                        (steps[currentStepIndex + 1] as FormStep<T>).id
                     );
                 }
             }
diff --git a/CommonUI/src/Components/Forms/Steps/Steps.tsx b/CommonUI/src/Components/Forms/Steps/Steps.tsx
index ca11b762a35..b0f1fceb494 100644
--- a/CommonUI/src/Components/Forms/Steps/Steps.tsx
+++ b/CommonUI/src/Components/Forms/Steps/Steps.tsx
@@ -13,45 +13,48 @@ export interface ComponentProps<T> {
 const Steps: Function = <T extends Object>(
     props: ComponentProps<T>
 ): ReactElement => {
+    const steps: Array<FormStep<T>> = props.steps.filter(
+        (step: FormStep<T>) => {
+            if (!step.showIf) {
+                return true;
+            }
+
+            return step.showIf(props.formValues);
+        }
+    );
+
     return (
         <div className="pr-4 py-6 sm:pr-6 lg:pr-8">
             <nav className="flex" aria-label="Progress">
                 <ol role="list" className="space-y-6">
-                    {props.steps
-                        .filter((step: FormStep<T>) => {
-                            if (!step.showIf) {
-                                return true;
+                    {steps.map((step: FormStep<T>, index: number) => {
+                        const indexOfCurrentState: number = steps.findIndex(
+                            (step: FormStep<T>) => {
+                                return step.id === props.currentFormStepId;
                             }
+                        );
 
-                            return step.showIf(props.formValues);
-                        })
-                        .map((step: FormStep<T>, index: number) => {
-                            const indexOfCurrentState: number =
-                                props.steps.findIndex((step: FormStep<T>) => {
-                                    return step.id === props.currentFormStepId;
-                                });
-
-                            let state: FormStepState = FormStepState.INACTIVE;
-
-                            if (indexOfCurrentState > index) {
-                                state = FormStepState.COMPLETED;
-                            } else if (indexOfCurrentState === index) {
-                                state = FormStepState.ACTIVE;
-                            } else {
-                                state = FormStepState.INACTIVE;
-                            }
+                        let state: FormStepState = FormStepState.INACTIVE;
+
+                        if (indexOfCurrentState > index) {
+                            state = FormStepState.COMPLETED;
+                        } else if (indexOfCurrentState === index) {
+                            state = FormStepState.ACTIVE;
+                        } else {
+                            state = FormStepState.INACTIVE;
+                        }
 
-                            return (
-                                <Step
-                                    state={state}
-                                    step={step}
-                                    key={index}
-                                    onClick={(step: FormStep<T>) => {
-                                        props.onClick(step);
-                                    }}
-                                />
-                            );
-                        })}
+                        return (
+                            <Step
+                                state={state}
+                                step={step}
+                                key={index}
+                                onClick={(step: FormStep<T>) => {
+                                    props.onClick(step);
+                                }}
+                            />
+                        );
+                    })}
                 </ol>
             </nav>
         </div>