diff --git a/src/libs/actions/PersonalDetails.ts b/src/libs/actions/PersonalDetails.ts
index 02b5f70db285..ff919f312987 100644
--- a/src/libs/actions/PersonalDetails.ts
+++ b/src/libs/actions/PersonalDetails.ts
@@ -60,31 +60,6 @@ function getDisplayName(login: string, personalDetail: Pick<PersonalDetails, 'fi
     return fullName || userLogin;
 }
 
-/**
- * @param [defaultDisplayName] display name to use if user details don't exist in Onyx or if
- *                                      found details don't include the user's displayName or login
- */
-function getDisplayNameForTypingIndicator(userAccountIDOrLogin: string, defaultDisplayName = ''): string {
-    // Try to convert to a number, which means we have an accountID
-    const accountID = Number(userAccountIDOrLogin);
-
-    // If the user is typing on OldDot, userAccountIDOrLogin will be a string (the user's login),
-    // so Number(string) is NaN. Search for personalDetails by login to get the display name.
-    if (Number.isNaN(accountID)) {
-        const detailsByLogin = Object.entries(allPersonalDetails ?? {}).find(([, value]) => value?.login === userAccountIDOrLogin)?.[1];
-
-        // It's possible for displayName to be empty string, so we must use "||" to fallback to userAccountIDOrLogin.
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        return detailsByLogin?.displayName || userAccountIDOrLogin;
-    }
-
-    const detailsByAccountID = allPersonalDetails?.[accountID];
-
-    // It's possible for displayName to be empty string, so we must use "||" to fallback to login or defaultDisplayName.
-    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    return detailsByAccountID?.displayName || detailsByAccountID?.login || defaultDisplayName;
-}
-
 /**
  * Gets the first and last name from the user's personal details.
  * If the login is the same as the displayName, then they don't exist,
@@ -585,7 +560,6 @@ export {
     extractFirstAndLastNameFromAvailableDetails,
     getCountryISO,
     getDisplayName,
-    getDisplayNameForTypingIndicator,
     getPrivatePersonalDetails,
     openPersonalDetailsPage,
     openPublicProfilePage,
diff --git a/src/pages/home/report/ReportTypingIndicator.js b/src/pages/home/report/ReportTypingIndicator.js
index 74778b364db1..785f1e3f6a1e 100755
--- a/src/pages/home/report/ReportTypingIndicator.js
+++ b/src/pages/home/report/ReportTypingIndicator.js
@@ -2,80 +2,70 @@ import PropTypes from 'prop-types';
 import React, {useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
-import networkPropTypes from '@components/networkPropTypes';
-import {withNetwork} from '@components/OnyxProvider';
 import Text from '@components/Text';
 import TextWithEllipsis from '@components/TextWithEllipsis';
-import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
-import * as PersonalDetails from '@userActions/PersonalDetails';
+import * as ReportUtils from '@libs/ReportUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 const propTypes = {
     /** Key-value pairs of user accountIDs/logins and whether or not they are typing. Keys are accountIDs or logins. */
     userTypingStatuses: PropTypes.objectOf(PropTypes.bool),
-
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
-    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     userTypingStatuses: {},
 };
 
-function ReportTypingIndicator(props) {
+function ReportTypingIndicator({userTypingStatuses}) {
+    const {translate} = useLocalize();
+    const {isOffline} = useNetwork();
+
     const styles = useThemeStyles();
-    const usersTyping = useMemo(() => _.filter(_.keys(props.userTypingStatuses), (loginOrAccountID) => props.userTypingStatuses[loginOrAccountID]), [props.userTypingStatuses]);
+    const usersTyping = useMemo(() => _.filter(_.keys(userTypingStatuses), (loginOrAccountID) => userTypingStatuses[loginOrAccountID]), [userTypingStatuses]);
+    const firstUserTyping = usersTyping[0];
+
+    const isUserTypingADisplayName = Number.isNaN(Number(firstUserTyping));
+
     // If we are offline, the user typing statuses are not up-to-date so do not show them
-    if (props.network.isOffline) {
+    if (isOffline || !firstUserTyping) {
         return null;
     }
 
-    const numUsersTyping = _.size(usersTyping);
-
-    // Decide on the Text element that will hold the display based on the number of users that are typing.
-    switch (numUsersTyping) {
-        case 0:
-            return null;
-
-        case 1:
-            return (
-                <TextWithEllipsis
-                    leadingText={PersonalDetails.getDisplayNameForTypingIndicator(usersTyping[0], props.translate('common.someone'))}
-                    trailingText={` ${props.translate('reportTypingIndicator.isTyping')}`}
-                    textStyle={[styles.chatItemComposeSecondaryRowSubText]}
-                    wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]}
-                    leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
-                />
-            );
+    // If the user is typing on OldDot, firstUserTyping will be a string (the user's displayName)
+    const firstUserTypingDisplayName = isUserTypingADisplayName ? firstUserTyping : ReportUtils.getDisplayNameForParticipant(Number(firstUserTyping), false, false);
 
-        default:
-            return (
-                <Text
-                    style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset]}
-                    numberOfLines={1}
-                >
-                    {props.translate('reportTypingIndicator.multipleUsers')}
-                    {` ${props.translate('reportTypingIndicator.areTyping')}`}
-                </Text>
-            );
+    if (usersTyping.length === 1) {
+        return (
+            <TextWithEllipsis
+                leadingText={firstUserTypingDisplayName || translate('common.someone')}
+                trailingText={` ${translate('reportTypingIndicator.isTyping')}`}
+                textStyle={[styles.chatItemComposeSecondaryRowSubText]}
+                wrapperStyle={[styles.chatItemComposeSecondaryRow, styles.flex1]}
+                leadingTextParentStyle={styles.chatItemComposeSecondaryRowOffset}
+            />
+        );
     }
+    return (
+        <Text
+            style={[styles.chatItemComposeSecondaryRowSubText, styles.chatItemComposeSecondaryRowOffset]}
+            numberOfLines={1}
+        >
+            {translate('reportTypingIndicator.multipleUsers')}
+            {` ${translate('reportTypingIndicator.areTyping')}`}
+        </Text>
+    );
 }
 
 ReportTypingIndicator.propTypes = propTypes;
 ReportTypingIndicator.defaultProps = defaultProps;
 ReportTypingIndicator.displayName = 'ReportTypingIndicator';
 
-export default compose(
-    withLocalize,
-    withNetwork(),
-    withOnyx({
-        userTypingStatuses: {
-            key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`,
-            initialValue: {},
-        },
-    }),
-)(ReportTypingIndicator);
+export default withOnyx({
+    userTypingStatuses: {
+        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING}${reportID}`,
+        initialValue: {},
+    },
+})(ReportTypingIndicator);