diff --git a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
index ea9a1da690e8..8dd3996a769a 100644
--- a/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
+++ b/src/pages/settings/Security/AddDelegate/ConfirmDelegatePage.tsx
@@ -73,20 +73,18 @@ function ConfirmDelegatePage({route}: ConfirmDelegatePageProps) {
                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(login, role))}
                 shouldShowRightIcon
             />
-
-            {isValidateCodeActionModalVisible && (
-                <DelegateMagicCodeModal
-                    login={login}
-                    role={role}
-                    onClose={() => {
-                        if (!showValidateActionModal) {
-                            return;
-                        }
-
-                        Navigation.navigate(ROUTES.SETTINGS_SECURITY);
-                    }}
-                />
-            )}
+            <DelegateMagicCodeModal
+                login={login}
+                role={role}
+                onClose={() => {
+                    if (!showValidateActionModal) {
+                        setIsValidateCodeActionModalVisible(false);
+                        return;
+                    }
+                    Navigation.navigate(ROUTES.SETTINGS_SECURITY);
+                }}
+                isValidateCodeActionModalVisible={isValidateCodeActionModalVisible}
+            />
         </HeaderPageLayout>
     );
 }
diff --git a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
index dd54aa5b9404..76c96d9121b1 100644
--- a/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
+++ b/src/pages/settings/Security/AddDelegate/DelegateMagicCodeModal.tsx
@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import ValidateCodeActionModal from '@components/ValidateCodeActionModal';
@@ -14,13 +14,13 @@ import ROUTES from '@src/ROUTES';
 type DelegateMagicCodeModalProps = {
     login: string;
     role: ValueOf<typeof CONST.DELEGATE_ROLE>;
+    isValidateCodeActionModalVisible: boolean;
     onClose?: () => void;
 };
 
-function DelegateMagicCodeModal({login, role, onClose}: DelegateMagicCodeModalProps) {
+function DelegateMagicCodeModal({login, role, onClose, isValidateCodeActionModalVisible}: DelegateMagicCodeModalProps) {
     const {translate} = useLocalize();
     const [account] = useOnyx(ONYXKEYS.ACCOUNT);
-    const [isValidateCodeActionModalVisible, setIsValidateCodeActionModalVisible] = useState(true);
 
     const currentDelegate = account?.delegatedAccess?.delegates?.find((d) => d.email === login);
     const validateLoginError = ErrorUtils.getLatestErrorField(currentDelegate, 'addDelegate');
@@ -36,7 +36,6 @@ function DelegateMagicCodeModal({login, role, onClose}: DelegateMagicCodeModalPr
 
     const onBackButtonPress = () => {
         onClose?.();
-        setIsValidateCodeActionModalVisible(false);
     };
 
     const clearError = () => {