diff --git a/packages/reports/src/Components/Errors/error-component.tsx b/packages/reports/src/Components/Errors/error-component.tsx
index 057f198e299d..ff6194d0ebb5 100644
--- a/packages/reports/src/Components/Errors/error-component.tsx
+++ b/packages/reports/src/Components/Errors/error-component.tsx
@@ -2,16 +2,7 @@ import React from 'react';
 import { PageError, Dialog } from '@deriv/components';
 import { routes } from '@deriv/shared';
 import { localize } from '@deriv/translations';
-
-type TErrorComponent = {
-    header: string;
-    is_dialog: boolean;
-    message: React.ReactElement | string;
-    redirect_label: string;
-    redirectOnClick: () => void;
-    should_show_refresh: boolean;
-    type: string;
-};
+import { TErrorComponent } from '../../Types';
 
 const ErrorComponent = ({
     header,
diff --git a/packages/reports/src/Components/Routes/index.js b/packages/reports/src/Components/Routes/index.js
new file mode 100644
index 000000000000..ecff56bd3670
--- /dev/null
+++ b/packages/reports/src/Components/Routes/index.js
@@ -0,0 +1,7 @@
+import BinaryLink from './binary-link';
+import RouteWithSubRoutes from './route-with-sub-routes';
+import BinaryRoutes from './binary-routes';
+
+export * from './helpers';
+export { BinaryLink, RouteWithSubRoutes };
+export default BinaryRoutes;
diff --git a/packages/reports/src/Containers/routes.jsx b/packages/reports/src/Containers/routes.jsx
deleted file mode 100644
index 0944b459b500..000000000000
--- a/packages/reports/src/Containers/routes.jsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { PropTypes as MobxPropTypes } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { withRouter } from 'react-router';
-import BinaryRoutes from 'Components/Routes';
-import { connect } from 'Stores/connect';
-import ErrorComponent from 'Components/Errors';
-
-const Routes = props => {
-    if (props.has_error) {
-        return <ErrorComponent {...props.error} />;
-    }
-
-    return (
-        <BinaryRoutes
-            is_logged_in={props.is_logged_in}
-            is_logging_in={props.is_logging_in}
-            passthrough={props.passthrough}
-        />
-    );
-};
-
-Routes.propTypes = {
-    error: MobxPropTypes.objectOrObservableObject,
-    has_error: PropTypes.bool,
-    is_logged_in: PropTypes.bool,
-    is_logging_in: PropTypes.bool,
-    is_virtual: PropTypes.bool,
-    passthrough: PropTypes.object,
-};
-
-// need to wrap withRouter around connect
-// to prevent updates on <BinaryRoutes /> from being blocked
-export default withRouter(
-    connect(({ client, common }) => ({
-        is_logged_in: client.is_logged_in,
-        is_logging_in: client.is_logging_in,
-        error: common.error,
-        has_error: common.has_error,
-    }))(Routes)
-);
diff --git a/packages/reports/src/Containers/routes.tsx b/packages/reports/src/Containers/routes.tsx
new file mode 100644
index 000000000000..e7386ecadb34
--- /dev/null
+++ b/packages/reports/src/Containers/routes.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { withRouter } from 'react-router';
+import BinaryRoutes from 'Components/Routes';
+import { connect } from 'Stores/connect';
+import ErrorComponent from 'Components/Errors';
+import { TRootStore } from 'Stores/index';
+import { TRoutes } from '../Types';
+
+const Routes = ({ error, has_error, is_logged_in, is_logging_in, is_virtual, passthrough }: TRoutes) => {
+    if (has_error) {
+        return <ErrorComponent {...error} />;
+    }
+
+    return <BinaryRoutes is_logged_in={is_logged_in} is_logging_in={is_logging_in} passthrough={passthrough} />;
+};
+
+// need to wrap withRouter around connect
+// to prevent updates on <BinaryRoutes /> from being blocked
+export default withRouter(
+    connect(({ client, common }: TRootStore) => ({
+        is_logged_in: client.is_logged_in,
+        is_logging_in: client.is_logging_in,
+        error: common.error,
+        has_error: common.has_error,
+    }))(Routes)
+);
diff --git a/packages/reports/src/Types/common-prop.type.ts b/packages/reports/src/Types/common-prop.type.ts
index c111ea912f3e..9097eee98bdb 100644
--- a/packages/reports/src/Types/common-prop.type.ts
+++ b/packages/reports/src/Types/common-prop.type.ts
@@ -24,6 +24,25 @@ export type TRoute = {
     exact?: boolean;
 };
 
+export type TErrorComponent = {
+    header: string;
+    is_dialog: boolean;
+    message: React.ReactElement | string;
+    redirect_label: string;
+    redirectOnClick: () => void;
+    should_show_refresh: boolean;
+    type: string;
+};
+
+export type TRoutes = {
+    error?: TErrorComponent;
+    has_error?: boolean;
+    is_logged_in?: boolean;
+    is_logging_in?: boolean;
+    is_virtual?: boolean;
+    passthrough?: TPassthrough;
+};
+
 export type TRouteConfig = TRoute & {
     is_modal?: boolean;
     is_authenticated?: boolean;
diff --git a/packages/reports/src/app.jsx b/packages/reports/src/app.jsx
index 2e44f8f0cfa0..d1e43a6ec07c 100644
--- a/packages/reports/src/app.jsx
+++ b/packages/reports/src/app.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Routes from 'Containers/routes.jsx';
+import Routes from 'Containers/routes';
 import { MobxContentProvider } from 'Stores/connect';
 import 'Sass/app.scss';
 import initStore from './init-store'; // eslint-disable-line import/extensions