diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index 00830e0dd51c..e1c5a7c48b86 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -1,6 +1,6 @@
 import {PortalHost} from '@gorhom/portal';
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
-import {InteractionManager, View} from 'react-native';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
+import {View} from 'react-native';
 import ReactNativeModal from 'react-native-modal';
 import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
@@ -24,7 +24,7 @@ import type BaseModalProps from './types';
 
 function BaseModal(
     {
-        isVisible: isVisibleProp,
+        isVisible,
         onClose,
         shouldSetModalVisibility = true,
         onModalHide = () => {},
@@ -68,18 +68,6 @@ function BaseModal(
 
     const safeAreaInsets = useSafeAreaInsets();
 
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        if (isVisibleProp) {
-            InteractionManager.runAfterInteractions(() => {
-                setIsVisible(true);
-            });
-            return;
-        }
-
-        setIsVisible(false);
-    }, [isVisibleProp]);
-
     const isVisibleRef = useRef(isVisible);
     const wasVisible = usePrevious(isVisible);
 
diff --git a/src/pages/settings/Profile/ProfileAvatar.tsx b/src/pages/settings/Profile/ProfileAvatar.tsx
index f2f43b9cdc0d..a80db51580ba 100644
--- a/src/pages/settings/Profile/ProfileAvatar.tsx
+++ b/src/pages/settings/Profile/ProfileAvatar.tsx
@@ -1,5 +1,6 @@
 import React, {useEffect} from 'react';
-import {useOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
 import AttachmentModal from '@components/AttachmentModal';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
@@ -8,17 +9,19 @@ import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as UserUtils from '@libs/UserUtils';
 import * as ValidationUtils from '@libs/ValidationUtils';
 import * as PersonalDetails from '@userActions/PersonalDetails';
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
+import type {PersonalDetailsList, PersonalDetailsMetadata} from '@src/types/onyx';
 
-type ProfileAvatarProps = PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
+type ProfileAvatarOnyxProps = {
+    personalDetails: OnyxEntry<PersonalDetailsList>;
+    personalDetailsMetadata: OnyxEntry<Record<string, PersonalDetailsMetadata>>;
+    isLoadingApp: OnyxEntry<boolean>;
+};
 
-function ProfileAvatar({route}: ProfileAvatarProps) {
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
-    const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+type ProfileAvatarProps = ProfileAvatarOnyxProps & PlatformStackScreenProps<AuthScreensParamList, typeof SCREENS.PROFILE_AVATAR>;
 
+function ProfileAvatar({route, personalDetails, personalDetailsMetadata, isLoadingApp = true}: ProfileAvatarProps) {
     const personalDetail = personalDetails?.[route.params.accountID];
     const avatarURL = personalDetail?.avatar ?? '';
     const accountID = Number(route.params.accountID ?? '-1');
@@ -26,7 +29,7 @@ function ProfileAvatar({route}: ProfileAvatarProps) {
     const displayName = PersonalDetailsUtils.getDisplayNameOrDefault(personalDetail);
 
     useEffect(() => {
-        if (!ValidationUtils.isValidAccountRoute(Number(accountID)) || !!avatarURL) {
+        if (!ValidationUtils.isValidAccountRoute(Number(accountID)) ?? !!avatarURL) {
             return;
         }
         PersonalDetails.openPublicProfilePage(accountID);
@@ -34,13 +37,11 @@ function ProfileAvatar({route}: ProfileAvatarProps) {
 
     return (
         <AttachmentModal
-            defaultOpen
             headerTitle={displayName}
+            defaultOpen
             source={UserUtils.getFullSizeAvatar(avatarURL, accountID)}
             onModalClose={() => {
-                setTimeout(() => {
-                    Navigation.goBack();
-                }, CONST.ANIMATED_TRANSITION);
+                Navigation.goBack();
             }}
             originalFileName={personalDetail?.originalFileName ?? ''}
             isLoading={!!isLoading}
@@ -51,4 +52,14 @@ function ProfileAvatar({route}: ProfileAvatarProps) {
 
 ProfileAvatar.displayName = 'ProfileAvatar';
 
-export default ProfileAvatar;
+export default withOnyx<ProfileAvatarProps, ProfileAvatarOnyxProps>({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+    personalDetailsMetadata: {
+        key: ONYXKEYS.PERSONAL_DETAILS_METADATA,
+    },
+    isLoadingApp: {
+        key: ONYXKEYS.IS_LOADING_APP,
+    },
+})(ProfileAvatar);