diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.tsx
similarity index 58%
rename from src/components/UnreadActionIndicator.js
rename to src/components/UnreadActionIndicator.tsx
index 7555c93c2326..eea73801781a 100755
--- a/src/components/UnreadActionIndicator.js
+++ b/src/components/UnreadActionIndicator.tsx
@@ -1,26 +1,30 @@
 import React from 'react';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
 import Text from './Text';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
-function UnreadActionIndicator(props) {
+type UnreadActionIndicatorProps = {
+    reportActionID: string;
+};
+
+function UnreadActionIndicator(props: UnreadActionIndicatorProps) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
     return (
         <View
-            accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')}
+            accessibilityLabel={translate('accessibilityHints.newMessageLineIndicator')}
             data-action-id={props.reportActionID}
             style={[styles.unreadIndicatorContainer, styles.userSelectNone, styles.pointerEventsNone]}
             dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
         >
             <View style={styles.unreadIndicatorLine} />
-            <Text style={styles.unreadIndicatorText}>{props.translate('common.new')}</Text>
+            <Text style={styles.unreadIndicatorText}>{translate('common.new')}</Text>
         </View>
     );
 }
 
-UnreadActionIndicator.propTypes = {...withLocalizePropTypes};
-
 UnreadActionIndicator.displayName = 'UnreadActionIndicator';
-export default withLocalize(UnreadActionIndicator);
+export default UnreadActionIndicator;