diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
index 8db093ec24d0..8e6a67ce5ee7 100644
--- a/src/pages/workspace/withPolicy.tsx
+++ b/src/pages/workspace/withPolicy.tsx
@@ -116,3 +116,4 @@ export default function <TProps extends WithPolicyProps, TRef>(WrappedComponent:
 }
 
 export {policyPropTypes, policyDefaultProps};
+export type {WithPolicyOnyxProps, WithPolicyProps};
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.js b/src/pages/workspace/withPolicyAndFullscreenLoading.js
deleted file mode 100644
index 2911eadccf5f..000000000000
--- a/src/pages/workspace/withPolicyAndFullscreenLoading.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import isEmpty from 'lodash/isEmpty';
-import omit from 'lodash/omit';
-import PropTypes from 'prop-types';
-import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import compose from '@libs/compose';
-import getComponentDisplayName from '@libs/getComponentDisplayName';
-import ONYXKEYS from '@src/ONYXKEYS';
-import withPolicy, {policyDefaultProps, policyPropTypes} from './withPolicy';
-
-export default function (WrappedComponent) {
-    const propTypes = {
-        /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
-         * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
-        forwardedRef: PropTypes.func,
-
-        /** Indicated whether the report data is loading */
-        isLoadingReportData: PropTypes.bool,
-
-        ...policyPropTypes,
-    };
-
-    const defaultProps = {
-        forwardedRef: () => {},
-        isLoadingReportData: true,
-        ...policyDefaultProps,
-    };
-
-    function WithPolicyAndFullscreenLoading(props) {
-        if (props.isLoadingReportData && isEmpty(props.policy) && isEmpty(props.policyDraft)) {
-            return <FullscreenLoadingIndicator />;
-        }
-
-        const rest = omit(props, ['forwardedRef']);
-        return (
-            <WrappedComponent
-                // eslint-disable-next-line react/jsx-props-no-spreading
-                {...rest}
-                ref={props.forwardedRef}
-            />
-        );
-    }
-
-    WithPolicyAndFullscreenLoading.propTypes = propTypes;
-    WithPolicyAndFullscreenLoading.defaultProps = defaultProps;
-    WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading(${getComponentDisplayName(WrappedComponent)})`;
-
-    const WithPolicyAndFullscreenLoadingWithRef = React.forwardRef((props, ref) => (
-        <WithPolicyAndFullscreenLoading
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...props}
-            forwardedRef={ref}
-        />
-    ));
-
-    WithPolicyAndFullscreenLoadingWithRef.displayName = 'WithPolicyAndFullscreenLoadingWithRef';
-
-    return compose(
-        withPolicy,
-        withOnyx({
-            isLoadingReportData: {
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-            },
-        }),
-    )(WithPolicyAndFullscreenLoadingWithRef);
-}
diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx
new file mode 100644
index 000000000000..3e8bd3bdddb4
--- /dev/null
+++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx
@@ -0,0 +1,62 @@
+import isEmpty from 'lodash/isEmpty';
+import React, {ComponentType, ForwardedRef, forwardRef, RefAttributes} from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
+import compose from '@libs/compose';
+import ONYXKEYS from '@src/ONYXKEYS';
+import withPolicy, {policyDefaultProps, WithPolicyOnyxProps, WithPolicyProps} from './withPolicy';
+
+type WithPolicyAndFullscreenLoadingOnyxProps = {
+    /** Indicated whether the report data is loading */
+    isLoadingReportData: OnyxEntry<boolean>;
+};
+
+type WithPolicyAndFullscreenLoadingProps = WithPolicyProps & WithPolicyAndFullscreenLoadingOnyxProps;
+
+type ComponentWithPolicyAndFullscreenLoading<TProps extends WithPolicyAndFullscreenLoadingProps, TRef> = ComponentType<
+    Omit<Omit<TProps & RefAttributes<TRef>, keyof WithPolicyAndFullscreenLoadingOnyxProps>, keyof WithPolicyOnyxProps>
+>;
+
+export default function withPolicyAndFullscreenLoading<TProps extends WithPolicyAndFullscreenLoadingProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): ComponentWithPolicyAndFullscreenLoading<TProps, TRef> {
+    function WithPolicyAndFullscreenLoading(
+        {
+            isLoadingReportData = true,
+            policy = policyDefaultProps.policy,
+            policyDraft = policyDefaultProps.policyDraft,
+            policyMembers = policyDefaultProps.policyMembers,
+            policyMembersDraft = policyDefaultProps.policyMembersDraft,
+            ...rest
+        }: TProps,
+        ref: ForwardedRef<TRef>,
+    ) {
+        if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) {
+            return <FullscreenLoadingIndicator />;
+        }
+
+        return (
+            <WrappedComponent
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...(rest as TProps)}
+                isLoadingReportData={isLoadingReportData}
+                policy={policy}
+                policyDraft={policyDraft}
+                policyMembers={policyMembers}
+                policyMembersDraft={policyMembersDraft}
+                ref={ref}
+            />
+        );
+    }
+
+    WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading`;
+
+    return compose(
+        withOnyx<TProps & RefAttributes<TRef>, WithPolicyAndFullscreenLoadingOnyxProps>({
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            },
+        }),
+        withPolicy,
+    )(forwardRef(WithPolicyAndFullscreenLoading));
+}