diff --git a/src/components/ReportWelcomeText.js b/src/components/ReportWelcomeText.tsx
similarity index 53%
rename from src/components/ReportWelcomeText.js
rename to src/components/ReportWelcomeText.tsx
index 3693d02252f0..3fa3439fe86a 100644
--- a/src/components/ReportWelcomeText.js
+++ b/src/components/ReportWelcomeText.tsx
@@ -1,92 +1,72 @@
-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 _ from 'underscore';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import reportPropTypes from '@pages/reportPropTypes';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx';
 import Text from './Text';
 import UserDetailsTooltip from './UserDetailsTooltip';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-
-const personalDetailsPropTypes = PropTypes.shape({
-    /** The login of the person (either email or phone number) */
-    login: PropTypes.string,
-
-    /** The URL of the person's avatar (there should already be a default avatar if
-  the person doesn't have their own avatar uploaded yet, except for anon users) */
-    avatar: PropTypes.string,
-
-    /** This is either the user's full name, or their login if full name is an empty string */
-    displayName: PropTypes.string,
-});
-
-const propTypes = {
-    /** The report currently being looked at */
-    report: reportPropTypes,
-
-    /** The policy object for the current route */
-    policy: PropTypes.shape({
-        /** The name of the policy */
-        name: PropTypes.string,
-
-        /** The URL for the policy avatar */
-        avatar: PropTypes.string,
-    }),
-
-    /* Onyx Props */
 
+type ReportWelcomeTextOnyxProps = {
     /** All of the personal details for everyone */
-    personalDetails: PropTypes.objectOf(personalDetailsPropTypes),
-
-    ...withLocalizePropTypes,
+    personalDetails: OnyxEntry<PersonalDetailsList>;
 };
 
-const defaultProps = {
-    report: {},
-    policy: {},
-    personalDetails: {},
+type ReportWelcomeTextProps = ReportWelcomeTextOnyxProps & {
+    /** The report currently being looked at */
+    report: OnyxEntry<Report>;
+
+    /** The policy for the current route */
+    policy: OnyxEntry<Policy>;
 };
 
-function ReportWelcomeText(props) {
+function ReportWelcomeText({report, policy, personalDetails}: ReportWelcomeTextProps) {
+    const {translate} = useLocalize();
     const styles = useThemeStyles();
-    const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(props.report);
-    const isChatRoom = ReportUtils.isChatRoom(props.report);
+    const isPolicyExpenseChat = ReportUtils.isPolicyExpenseChat(report);
+    const isChatRoom = ReportUtils.isChatRoom(report);
     const isDefault = !(isChatRoom || isPolicyExpenseChat);
-    const participantAccountIDs = lodashGet(props.report, 'participantAccountIDs', []);
+    const participantAccountIDs = report?.participantAccountIDs ?? [];
     const isMultipleParticipant = participantAccountIDs.length > 1;
     const displayNamesWithTooltips = ReportUtils.getDisplayNamesWithTooltips(
-        OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, props.personalDetails),
+        // @ts-expect-error TODO: Remove this once OptionsListUtils (https://github.com/Expensify/App/issues/24921) is migrated to TypeScript.
+        OptionsListUtils.getPersonalDetailsForAccountIDs(participantAccountIDs, personalDetails),
         isMultipleParticipant,
     );
-    const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(props.policy);
-    const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(props.report, isUserPolicyAdmin);
-    const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(props.report, props.policy, participantAccountIDs);
+    const isUserPolicyAdmin = PolicyUtils.isPolicyAdmin(policy);
+    const roomWelcomeMessage = ReportUtils.getRoomWelcomeMessage(report, isUserPolicyAdmin);
+    const moneyRequestOptions = ReportUtils.getMoneyRequestOptions(report, policy, participantAccountIDs);
+
+    const navigateToReport = () => {
+        if (!report?.reportID) {
+            return;
+        }
+
+        Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID));
+    };
 
     return (
         <>
             <View>
                 <Text style={[styles.textHero]}>
-                    {isChatRoom ? props.translate('reportActionsView.welcomeToRoom', {roomName: ReportUtils.getReportName(props.report)}) : props.translate('reportActionsView.sayHello')}
+                    {isChatRoom ? translate('reportActionsView.welcomeToRoom', {roomName: ReportUtils.getReportName(report)}) : translate('reportActionsView.sayHello')}
                 </Text>
             </View>
             <Text style={[styles.mt3, styles.mw100]}>
                 {isPolicyExpenseChat && (
                     <>
-                        <Text>{props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')}</Text>
-                        <Text style={[styles.textStrong]}>{ReportUtils.getDisplayNameForParticipant(props.report.ownerAccountID)}</Text>
-                        <Text>{props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}</Text>
-                        <Text style={[styles.textStrong]}>{ReportUtils.getPolicyName(props.report)}</Text>
-                        <Text>{props.translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')}</Text>
+                        <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartOne')}</Text>
+                        <Text style={[styles.textStrong]}>{ReportUtils.getDisplayNameForParticipant(report?.ownerAccountID)}</Text>
+                        <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartTwo')}</Text>
+                        <Text style={[styles.textStrong]}>{ReportUtils.getPolicyName(report)}</Text>
+                        <Text>{translate('reportActionsView.beginningOfChatHistoryPolicyExpenseChatPartThree')}</Text>
                     </>
                 )}
                 {isChatRoom && (
@@ -95,10 +75,10 @@ function ReportWelcomeText(props) {
                         {roomWelcomeMessage.showReportName && (
                             <Text
                                 style={[styles.textStrong]}
-                                onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(props.report.reportID))}
+                                onPress={navigateToReport}
                                 suppressHighlighting
                             >
-                                {ReportUtils.getReportName(props.report)}
+                                {ReportUtils.getReportName(report)}
                             </Text>
                         )}
                         {roomWelcomeMessage.phrase2 !== undefined && <Text>{roomWelcomeMessage.phrase2}</Text>}
@@ -106,8 +86,9 @@ function ReportWelcomeText(props) {
                 )}
                 {isDefault && (
                     <Text>
-                        <Text>{props.translate('reportActionsView.beginningOfChatHistory')}</Text>
-                        {_.map(displayNamesWithTooltips, ({displayName, pronouns, accountID}, index) => (
+                        <Text>{translate('reportActionsView.beginningOfChatHistory')}</Text>
+                        {displayNamesWithTooltips.map(({displayName, pronouns, accountID}, index) => (
+                            // eslint-disable-next-line react/no-array-index-key
                             <Text key={`${displayName}${pronouns}${index}`}>
                                 <UserDetailsTooltip accountID={accountID}>
                                     {ReportUtils.isOptimisticPersonalDetail(accountID) ? (
@@ -122,31 +103,24 @@ function ReportWelcomeText(props) {
                                         </Text>
                                     )}
                                 </UserDetailsTooltip>
-                                {!_.isEmpty(pronouns) && <Text>{` (${pronouns})`}</Text>}
+                                {!!pronouns && <Text>{` (${pronouns})`}</Text>}
                                 {index === displayNamesWithTooltips.length - 1 && <Text>.</Text>}
-                                {index === displayNamesWithTooltips.length - 2 && <Text>{` ${props.translate('common.and')} `}</Text>}
+                                {index === displayNamesWithTooltips.length - 2 && <Text>{` ${translate('common.and')} `}</Text>}
                                 {index < displayNamesWithTooltips.length - 2 && <Text>, </Text>}
                             </Text>
                         ))}
                     </Text>
                 )}
-                {(moneyRequestOptions.includes(CONST.IOU.TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.TYPE.REQUEST)) && (
-                    <Text>{props.translate('reportActionsView.usePlusButton')}</Text>
-                )}
+                {(moneyRequestOptions.includes(CONST.IOU.TYPE.SEND) || moneyRequestOptions.includes(CONST.IOU.TYPE.REQUEST)) && <Text>{translate('reportActionsView.usePlusButton')}</Text>}
             </Text>
         </>
     );
 }
 
-ReportWelcomeText.defaultProps = defaultProps;
-ReportWelcomeText.propTypes = propTypes;
 ReportWelcomeText.displayName = 'ReportWelcomeText';
 
-export default compose(
-    withLocalize,
-    withOnyx({
-        personalDetails: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    }),
-)(ReportWelcomeText);
+export default withOnyx<ReportWelcomeTextProps, ReportWelcomeTextOnyxProps>({
+    personalDetails: {
+        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
+    },
+})(ReportWelcomeText);