diff --git a/src/components/withCurrentReportID.js b/src/components/withCurrentReportID.js
deleted file mode 100644
index ab1b5abc2395..000000000000
--- a/src/components/withCurrentReportID.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {createContext, forwardRef, useCallback, useMemo, useState} from 'react';
-import getComponentDisplayName from '@libs/getComponentDisplayName';
-import Navigation from '@libs/Navigation/Navigation';
-
-const CurrentReportIDContext = createContext(null);
-
-const withCurrentReportIDPropTypes = {
-    /** Function to update the state */
-    updateCurrentReportID: PropTypes.func.isRequired,
-
-    /** The top most report id */
-    currentReportID: PropTypes.string,
-};
-
-const withCurrentReportIDDefaultProps = {
-    currentReportID: '',
-};
-
-function CurrentReportIDContextProvider(props) {
-    const [currentReportID, setCurrentReportID] = useState('');
-
-    /**
-     * This function is used to update the currentReportID
-     * @param {Object} state root navigation state
-     */
-    const updateCurrentReportID = useCallback(
-        (state) => {
-            setCurrentReportID(Navigation.getTopmostReportId(state));
-        },
-        [setCurrentReportID],
-    );
-
-    /**
-     * The context this component exposes to child components
-     * @returns {Object} currentReportID to share between central pane and LHN
-     */
-    const contextValue = useMemo(
-        () => ({
-            updateCurrentReportID,
-            currentReportID,
-        }),
-        [updateCurrentReportID, currentReportID],
-    );
-
-    return <CurrentReportIDContext.Provider value={contextValue}>{props.children}</CurrentReportIDContext.Provider>;
-}
-
-CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider';
-CurrentReportIDContextProvider.propTypes = {
-    /** Actual content wrapped by this component */
-    children: PropTypes.node.isRequired,
-};
-
-export default function withCurrentReportID(WrappedComponent) {
-    const WithCurrentReportID = forwardRef((props, ref) => (
-        <CurrentReportIDContext.Consumer>
-            {(currentReportIDUtils) => (
-                <WrappedComponent
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...currentReportIDUtils}
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
-                    ref={ref}
-                />
-            )}
-        </CurrentReportIDContext.Consumer>
-    ));
-
-    WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`;
-
-    return WithCurrentReportID;
-}
-
-export {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps, CurrentReportIDContextProvider, CurrentReportIDContext};
diff --git a/src/components/withCurrentReportID.tsx b/src/components/withCurrentReportID.tsx
new file mode 100644
index 000000000000..22da02159073
--- /dev/null
+++ b/src/components/withCurrentReportID.tsx
@@ -0,0 +1,87 @@
+import {NavigationState} from '@react-navigation/native';
+import PropTypes from 'prop-types';
+import React, {ComponentType, createContext, ForwardedRef, forwardRef, RefAttributes, useCallback, useMemo, useState} from 'react';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import Navigation from '@libs/Navigation/Navigation';
+
+type CurrentReportIDContextValue = {
+    updateCurrentReportID: (state: NavigationState) => void;
+    currentReportID: string;
+};
+type CurrentReportIDContextProviderProps = {
+    /** Actual content wrapped by this component */
+    children: React.ReactNode;
+};
+
+const CurrentReportIDContext = createContext<CurrentReportIDContextValue | null>(null);
+
+// TODO: Remove when depended components are migrated to TypeScript.
+const withCurrentReportIDPropTypes = {
+    /** Function to update the state */
+    updateCurrentReportID: PropTypes.func.isRequired,
+
+    /** The top most report id */
+    currentReportID: PropTypes.string,
+};
+
+const withCurrentReportIDDefaultProps = {
+    currentReportID: '',
+};
+
+function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderProps) {
+    const [currentReportID, setCurrentReportID] = useState('');
+
+    /**
+     * This function is used to update the currentReportID
+     * @param state root navigation state
+     */
+    const updateCurrentReportID = useCallback(
+        (state: NavigationState) => {
+            setCurrentReportID(Navigation.getTopmostReportId(state) ?? '');
+        },
+        [setCurrentReportID],
+    );
+
+    /**
+     * The context this component exposes to child components
+     * @returns currentReportID to share between central pane and LHN
+     */
+    const contextValue = useMemo(
+        (): CurrentReportIDContextValue => ({
+            updateCurrentReportID,
+            currentReportID,
+        }),
+        [updateCurrentReportID, currentReportID],
+    );
+
+    return <CurrentReportIDContext.Provider value={contextValue}>{props.children}</CurrentReportIDContext.Provider>;
+}
+
+CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider';
+
+export default function withCurrentReportID<TProps extends CurrentReportIDContextValue, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): (props: Omit<TProps, keyof CurrentReportIDContextValue> & React.RefAttributes<TRef>) => React.ReactElement | null {
+    function WithCurrentReportID(props: Omit<TProps, keyof CurrentReportIDContextValue>, ref: ForwardedRef<TRef>) {
+        return (
+            <CurrentReportIDContext.Consumer>
+                {(currentReportIDUtils) => (
+                    <WrappedComponent
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...currentReportIDUtils}
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...(props as TProps)}
+                        ref={ref}
+                    />
+                )}
+            </CurrentReportIDContext.Consumer>
+        );
+    }
+
+    WithCurrentReportID.displayName = `withCurrentReportID(${getComponentDisplayName(WrappedComponent)})`;
+
+    return forwardRef(WithCurrentReportID);
+}
+
+export {withCurrentReportIDPropTypes, withCurrentReportIDDefaultProps, CurrentReportIDContextProvider, CurrentReportIDContext};
+export type {CurrentReportIDContextValue};
diff --git a/src/hooks/useCurrentReportID.js b/src/hooks/useCurrentReportID.js
deleted file mode 100644
index 1b3e4b706c4c..000000000000
--- a/src/hooks/useCurrentReportID.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import {useContext} from 'react';
-import {CurrentReportIDContext} from '@components/withCurrentReportID';
-
-export default function useCurrentReportID() {
-    return useContext(CurrentReportIDContext);
-}
diff --git a/src/hooks/useCurrentReportID.tsx b/src/hooks/useCurrentReportID.tsx
new file mode 100644
index 000000000000..8514a474706b
--- /dev/null
+++ b/src/hooks/useCurrentReportID.tsx
@@ -0,0 +1,6 @@
+import {useContext} from 'react';
+import {CurrentReportIDContext, CurrentReportIDContextValue} from '@components/withCurrentReportID';
+
+export default function useCurrentReportID(): CurrentReportIDContextValue | null {
+    return useContext(CurrentReportIDContext);
+}