diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js
index aa5809375a47..3dd23d9051eb 100644
--- a/src/components/AvatarWithImagePicker.js
+++ b/src/components/AvatarWithImagePicker.js
@@ -24,7 +24,7 @@ import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback';
 import AttachmentModal from './AttachmentModal';
 import DotIndicatorMessage from './DotIndicatorMessage';
 import * as Browser from '../libs/Browser';
-import withNavigationFocus, {withNavigationFocusPropTypes} from './withNavigationFocus';
+import withNavigationFocus from './withNavigationFocus';
 import compose from '../libs/compose';
 
 const propTypes = {
@@ -91,8 +91,10 @@ const propTypes = {
     /** File name of the avatar */
     originalFileName: PropTypes.string,
 
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
+
     ...withLocalizePropTypes,
-    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
index 4ffddd700359..0125fc8e178e 100755
--- a/src/components/OptionsSelector/BaseOptionsSelector.js
+++ b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -9,7 +9,7 @@ import OptionsList from '../OptionsList';
 import CONST from '../../CONST';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../withLocalize';
-import withNavigationFocus, {withNavigationFocusPropTypes} from '../withNavigationFocus';
+import withNavigationFocus from '../withNavigationFocus';
 import TextInput from '../TextInput';
 import ArrowKeyFocusManager from '../ArrowKeyFocusManager';
 import KeyboardShortcut from '../../libs/KeyboardShortcut';
@@ -32,9 +32,11 @@ const propTypes = {
     /** List styles for OptionsList */
     listStyles: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
+
     ...optionsSelectorPropTypes,
     ...withLocalizePropTypes,
-    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/components/RoomNameInput/roomNameInputPropTypes.js b/src/components/RoomNameInput/roomNameInputPropTypes.js
index ab1ac37d32c8..7f8292f0123e 100644
--- a/src/components/RoomNameInput/roomNameInputPropTypes.js
+++ b/src/components/RoomNameInput/roomNameInputPropTypes.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import {withNavigationFocusPropTypes} from '../withNavigationFocus';
 
 const propTypes = {
     /** Callback to execute when the text input is modified correctly */
@@ -29,7 +28,8 @@ const propTypes = {
     /** Whether we should wait before focusing the TextInput, useful when using transitions on Android */
     shouldDelayFocus: PropTypes.bool,
 
-    ...withNavigationFocusPropTypes,
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
diff --git a/src/components/withNavigationFocus.js b/src/components/withNavigationFocus.js
deleted file mode 100644
index f934f038e311..000000000000
--- a/src/components/withNavigationFocus.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {useIsFocused} from '@react-navigation/native';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import refPropTypes from './refPropTypes';
-
-const withNavigationFocusPropTypes = {
-    isFocused: PropTypes.bool.isRequired,
-};
-
-export default function withNavigationFocus(WrappedComponent) {
-    function WithNavigationFocus(props) {
-        const isFocused = useIsFocused();
-        return (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-                isFocused={isFocused}
-            />
-        );
-    }
-
-    WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
-    WithNavigationFocus.propTypes = {
-        forwardedRef: refPropTypes,
-    };
-    WithNavigationFocus.defaultProps = {
-        forwardedRef: undefined,
-    };
-    return React.forwardRef((props, ref) => (
-        <WithNavigationFocus
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-}
-
-export {withNavigationFocusPropTypes};
diff --git a/src/components/withNavigationFocus.tsx b/src/components/withNavigationFocus.tsx
new file mode 100644
index 000000000000..f3f1d3561d9c
--- /dev/null
+++ b/src/components/withNavigationFocus.tsx
@@ -0,0 +1,26 @@
+import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import {useIsFocused} from '@react-navigation/native';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+type WithNavigationFocusProps = {
+    isFocused: boolean;
+};
+
+export default function withNavigationFocus<TProps extends WithNavigationFocusProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: Omit<TProps, keyof WithNavigationFocusProps> & React.RefAttributes<TRef>) => React.ReactElement | null {
+    function WithNavigationFocus(props: Omit<TProps, keyof WithNavigationFocusProps>, ref: ForwardedRef<TRef>) {
+        const isFocused = useIsFocused();
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as TProps)}
+                ref={ref}
+                isFocused={isFocused}
+            />
+        );
+    }
+
+    WithNavigationFocus.displayName = `withNavigationFocus(${getComponentDisplayName(WrappedComponent)})`;
+    return React.forwardRef(WithNavigationFocus);
+}
diff --git a/src/pages/signin/LoginForm/BaseLoginForm.js b/src/pages/signin/LoginForm/BaseLoginForm.js
index 8adedde6d546..6270e6982e6e 100644
--- a/src/pages/signin/LoginForm/BaseLoginForm.js
+++ b/src/pages/signin/LoginForm/BaseLoginForm.js
@@ -30,7 +30,7 @@ import GoogleSignIn from '../../../components/SignInButtons/GoogleSignIn';
 import isInputAutoFilled from '../../../libs/isInputAutoFilled';
 import * as PolicyUtils from '../../../libs/PolicyUtils';
 import Log from '../../../libs/Log';
-import withNavigationFocus, {withNavigationFocusPropTypes} from '../../../components/withNavigationFocus';
+import withNavigationFocus from '../../../components/withNavigationFocus';
 import usePrevious from '../../../hooks/usePrevious';
 import * as MemoryOnlyKeys from '../../../libs/actions/MemoryOnlyKeys/MemoryOnlyKeys';
 
@@ -66,13 +66,14 @@ const propTypes = {
     /** Whether or not the sign in page is being rendered in the RHP modal */
     isInModal: PropTypes.bool,
 
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
+
     ...windowDimensionsPropTypes,
 
     ...withLocalizePropTypes,
 
     ...toggleVisibilityViewPropTypes,
-
-    ...withNavigationFocusPropTypes,
 };
 
 const defaultProps = {
diff --git a/src/pages/workspace/WorkspaceNewRoomPage.js b/src/pages/workspace/WorkspaceNewRoomPage.js
index da0bf845cc81..80c1a13731bd 100644
--- a/src/pages/workspace/WorkspaceNewRoomPage.js
+++ b/src/pages/workspace/WorkspaceNewRoomPage.js
@@ -3,7 +3,7 @@ import {View} from 'react-native';
 import _ from 'underscore';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
-import withNavigationFocus, {withNavigationFocusPropTypes} from '../../components/withNavigationFocus';
+import withNavigationFocus from '../../components/withNavigationFocus';
 import * as Report from '../../libs/actions/Report';
 import * as App from '../../libs/actions/App';
 import useLocalize from '../../hooks/useLocalize';
@@ -61,7 +61,8 @@ const propTypes = {
     /** A collection of objects for all policies which key policy member objects by accountIDs */
     allPolicyMembers: PropTypes.objectOf(PropTypes.objectOf(policyMemberPropType)),
 
-    ...withNavigationFocusPropTypes,
+    /** Whether navigation is focused */
+    isFocused: PropTypes.bool.isRequired,
 };
 const defaultProps = {
     betas: [],