diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
index 212776a0a..20c18fc33 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Onboarding/Onboarding.js
@@ -2,44 +2,35 @@ import Container from '../../ReusableComponents/Container';
 import { useOnboardingStep } from '../../../data';
 import { getSteps } from './availableSteps';
 
+const getCurrentStep = ( requestedStep, steps ) => {
+	const isValidStep = ( step ) =>
+		typeof step === 'number' &&
+		Number.isInteger( step ) &&
+		step >= 0 &&
+		step < steps.length;
+
+	const safeCurrentStep = isValidStep( requestedStep ) ? requestedStep : 0;
+	return steps[ safeCurrentStep ];
+};
+
 const Onboarding = () => {
 	const { step, setStep, setCompleted, flags } = useOnboardingStep();
+	const steps = getSteps( flags );
+
+	const CurrentStepComponent = getCurrentStep( step, steps );
 
 	return (
 		<Container page="onboarding">
 			<div className="ppcp-r-card">
-				<OnboardingStep
-					currentStep={ step }
+				<CurrentStepComponent
 					setStep={ setStep }
+					currentStep={ step }
 					setCompleted={ setCompleted }
-					flags={ flags }
+					stepperOrder={ steps }
 				/>
 			</div>
 		</Container>
 	);
 };
 
-const OnboardingStep = ( { currentStep, setStep, setCompleted, flags } ) => {
-	const stepperOrder = getSteps( flags );
-
-	const isValidStep = ( step ) =>
-		typeof step === 'number' &&
-		Number.isInteger( step ) &&
-		step >= 0 &&
-		step < stepperOrder.length;
-
-	const safeCurrentStep = isValidStep( currentStep ) ? currentStep : 0;
-
-	const CurrentStepComponent = stepperOrder[ safeCurrentStep ];
-
-	return (
-		<CurrentStepComponent
-			setStep={ setStep }
-			currentStep={ safeCurrentStep }
-			setCompleted={ setCompleted }
-			stepperOrder={ stepperOrder }
-		/>
-	);
-};
-
 export default Onboarding;