diff --git a/__mocks__/react-native-onyx.ts b/__mocks__/react-native-onyx.ts
index 253e3db47a96..9c6a36380c04 100644
--- a/__mocks__/react-native-onyx.ts
+++ b/__mocks__/react-native-onyx.ts
@@ -5,7 +5,7 @@
 
 /* eslint-disable rulesdir/prefer-onyx-connect-in-libs */
 import type {ConnectOptions, OnyxKey} from 'react-native-onyx';
-import Onyx, {withOnyx} from 'react-native-onyx';
+import Onyx, {useOnyx, withOnyx} from 'react-native-onyx';
 
 let connectCallbackDelay = 0;
 function addDelayToConnectCallback(delay: number) {
@@ -40,4 +40,4 @@ const reactNativeOnyxMock: ReactNativeOnyxMock = {
 };
 
 export default reactNativeOnyxMock;
-export {withOnyx};
+export {withOnyx, useOnyx};
diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js b/src/pages/home/sidebar/ProfileAvatarWithIndicator.js
deleted file mode 100644
index bd9c01aba001..000000000000
--- a/src/pages/home/sidebar/ProfileAvatarWithIndicator.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* eslint-disable rulesdir/onyx-props-must-have-default */
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import AvatarWithIndicator from '@components/AvatarWithIndicator';
-import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
-import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import * as UserUtils from '@libs/UserUtils';
-import personalDetailsPropType from '@pages/personalDetailsPropType';
-import ONYXKEYS from '@src/ONYXKEYS';
-
-const propTypes = {
-    /** The personal details of the person who is logged in */
-    currentUserPersonalDetails: personalDetailsPropType,
-
-    /** Indicates whether the app is loading initial data */
-    isLoading: PropTypes.bool,
-
-    /** Whether the avatar is selected */
-    isSelected: PropTypes.bool,
-};
-
-const defaultProps = {
-    currentUserPersonalDetails: {
-        pendingFields: {avatar: ''},
-        accountID: '',
-        avatar: '',
-    },
-    isLoading: true,
-    isSelected: false,
-};
-
-function ProfileAvatarWithIndicator({currentUserPersonalDetails, isLoading, isSelected}) {
-    const styles = useThemeStyles();
-
-    return (
-        <OfflineWithFeedback pendingAction={lodashGet(currentUserPersonalDetails, 'pendingFields.avatar', null)}>
-            <View style={[isSelected && styles.selectedAvatarBorder]}>
-                <AvatarWithIndicator
-                    source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
-                    fallbackIcon={currentUserPersonalDetails.fallbackIcon}
-                    isLoading={isLoading && !currentUserPersonalDetails.avatar}
-                />
-            </View>
-        </OfflineWithFeedback>
-    );
-}
-
-ProfileAvatarWithIndicator.propTypes = propTypes;
-ProfileAvatarWithIndicator.defaultProps = defaultProps;
-ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator';
-export default compose(
-    withCurrentUserPersonalDetails,
-    withOnyx({
-        isLoading: {
-            key: ONYXKEYS.IS_LOADING_APP,
-        },
-    }),
-)(ProfileAvatarWithIndicator);
diff --git a/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx
new file mode 100644
index 000000000000..e7726fb89537
--- /dev/null
+++ b/src/pages/home/sidebar/ProfileAvatarWithIndicator.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import AvatarWithIndicator from '@components/AvatarWithIndicator';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as UserUtils from '@libs/UserUtils';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+type ProfileAvatarWithIndicatorProps = {
+    /** Whether the avatar is selected */
+    isSelected?: boolean;
+};
+
+function ProfileAvatarWithIndicator({isSelected = false}: ProfileAvatarWithIndicatorProps) {
+    const styles = useThemeStyles();
+    const currentUserPersonalDetails = useCurrentUserPersonalDetails();
+    const [isLoadingOnyxValue] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+    const isLoading = isLoadingOnyxValue ?? true;
+
+    return (
+        <OfflineWithFeedback pendingAction={currentUserPersonalDetails.pendingFields?.avatar}>
+            <View style={[isSelected && styles.selectedAvatarBorder]}>
+                <AvatarWithIndicator
+                    source={UserUtils.getAvatar(currentUserPersonalDetails.avatar, currentUserPersonalDetails.accountID)}
+                    fallbackIcon={currentUserPersonalDetails.fallbackIcon}
+                    isLoading={isLoading && !currentUserPersonalDetails.avatar}
+                />
+            </View>
+        </OfflineWithFeedback>
+    );
+}
+
+ProfileAvatarWithIndicator.displayName = 'ProfileAvatarWithIndicator';
+
+export default ProfileAvatarWithIndicator;