diff --git a/.eslintrc.js b/.eslintrc.js
index 75a74ed371c4..83e9479ce0c4 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -116,7 +116,7 @@ module.exports = {
                     },
                     {
                         selector: ['parameter', 'method'],
-                        format: ['camelCase'],
+                        format: ['camelCase', 'PascalCase'],
                     },
                 ],
                 '@typescript-eslint/ban-types': [
diff --git a/src/components/withNavigation.js b/src/components/withNavigation.js
deleted file mode 100644
index ef0f599dc982..000000000000
--- a/src/components/withNavigation.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {useNavigation} from '@react-navigation/native';
-import getComponentDisplayName from '../libs/getComponentDisplayName';
-import refPropTypes from './refPropTypes';
-
-const withNavigationPropTypes = {
-    navigation: PropTypes.object.isRequired,
-};
-
-export default function withNavigation(WrappedComponent) {
-    function WithNavigation(props) {
-        const navigation = useNavigation();
-        return (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
-                ref={props.forwardedRef}
-                navigation={navigation}
-            />
-        );
-    }
-
-    WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
-    WithNavigation.propTypes = {
-        forwardedRef: refPropTypes,
-    };
-    WithNavigation.defaultProps = {
-        forwardedRef: () => {},
-    };
-    return React.forwardRef((props, ref) => (
-        <WithNavigation
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-}
-
-export {withNavigationPropTypes};
diff --git a/src/components/withNavigation.tsx b/src/components/withNavigation.tsx
new file mode 100644
index 000000000000..c5842fdacc44
--- /dev/null
+++ b/src/components/withNavigation.tsx
@@ -0,0 +1,26 @@
+import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import {NavigationProp, useNavigation} from '@react-navigation/native';
+import getComponentDisplayName from '../libs/getComponentDisplayName';
+
+type WithNavigationProps = {
+    navigation: NavigationProp<ReactNavigation.RootParamList>;
+};
+
+export default function withNavigation<TProps extends WithNavigationProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: Omit<TProps, keyof WithNavigationProps>, ref: ForwardedRef<TRef>) => React.JSX.Element | null {
+    function WithNavigation(props: Omit<TProps, keyof WithNavigationProps>, ref: ForwardedRef<TRef>) {
+        const navigation = useNavigation();
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(props as TProps)}
+                ref={ref}
+                navigation={navigation}
+            />
+        );
+    }
+
+    WithNavigation.displayName = `withNavigation(${getComponentDisplayName(WrappedComponent)})`;
+    return React.forwardRef(WithNavigation);
+}
diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
index 27a15fa3d763..1c96a66f1d5a 100644
--- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
+++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.js
@@ -1,11 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
 import {createStackNavigator} from '@react-navigation/stack';
+import PropTypes from 'prop-types';
 
 import * as ModalStackNavigators from '../ModalStackNavigators';
 import RHPScreenOptions from '../RHPScreenOptions';
 import useWindowDimensions from '../../../../hooks/useWindowDimensions';
-import {withNavigationPropTypes} from '../../../../components/withNavigation';
 import styles from '../../../../styles/styles';
 import Overlay from './Overlay';
 import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
@@ -13,7 +13,10 @@ import NoDropZone from '../../../../components/DragAndDrop/NoDropZone';
 const Stack = createStackNavigator();
 
 const propTypes = {
-    ...withNavigationPropTypes,
+    /* Navigation functions provided by React Navigation */
+    navigation: PropTypes.shape({
+        goBack: PropTypes.func.isRequired,
+    }).isRequired,
 };
 
 function RightModalNavigator(props) {
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
index 24f855645870..e371274f89fb 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.js
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import ONYXKEYS from '../../../ONYXKEYS';
 import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
-import {withNavigationPropTypes} from '../../../components/withNavigation';
 import * as App from '../../actions/App';
 import usePermissions from '../../../hooks/usePermissions';
 import CONST from '../../../CONST';
@@ -40,7 +39,10 @@ const propTypes = {
         }),
     }).isRequired,
 
-    ...withNavigationPropTypes,
+    /* Navigation functions provided by React Navigation */
+    navigation: PropTypes.shape({
+        setParams: PropTypes.func.isRequired,
+    }).isRequired,
 };
 
 const defaultProps = {
diff --git a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
index 767bd9793ac2..542be8ed859e 100644
--- a/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
+++ b/src/libs/Navigation/AppNavigator/ReportScreenWrapper.js
@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {withNavigationPropTypes} from '../../../components/withNavigation';
 import ReportScreen from '../../../pages/home/ReportScreen';
 import ReportScreenIDSetter from './ReportScreenIDSetter';
 
@@ -17,7 +16,10 @@ const propTypes = {
         }),
     }).isRequired,
 
-    ...withNavigationPropTypes,
+    /* Navigation functions provided by React Navigation */
+    navigation: PropTypes.shape({
+        setParams: PropTypes.func.isRequired,
+    }).isRequired,
 };
 
 const defaultProps = {};
diff --git a/src/libs/getComponentDisplayName.ts b/src/libs/getComponentDisplayName.ts
index fd1bbcaea521..0bf52d543a84 100644
--- a/src/libs/getComponentDisplayName.ts
+++ b/src/libs/getComponentDisplayName.ts
@@ -1,6 +1,6 @@
 import {ComponentType} from 'react';
 
 /** Returns the display name of a component */
-export default function getComponentDisplayName(component: ComponentType): string {
+export default function getComponentDisplayName<TProps>(component: ComponentType<TProps>): string {
     return component.displayName ?? component.name ?? 'Component';
 }