diff --git a/packages/reports/src/Components/empty-portfolio-message.jsx b/packages/reports/src/Components/empty-portfolio-message.tsx
similarity index 88%
rename from packages/reports/src/Components/empty-portfolio-message.jsx
rename to packages/reports/src/Components/empty-portfolio-message.tsx
index 5f26070b2c88..9a36c46f6d14 100644
--- a/packages/reports/src/Components/empty-portfolio-message.jsx
+++ b/packages/reports/src/Components/empty-portfolio-message.tsx
@@ -2,7 +2,11 @@ import React from 'react';
 import { Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 
-const EmptyPortfolioMessage = ({ error }) => (
+type TEmptyPortfolioMessage = {
+    error: string;
+};
+
+const EmptyPortfolioMessage = ({ error }: TEmptyPortfolioMessage) => (
     <div className='portfolio-empty'>
         <div className='portfolio-empty__wrapper'>
             {error ? (
diff --git a/packages/reports/src/Components/index.js b/packages/reports/src/Components/index.js
index d498bb957778..f6aad7b8b061 100644
--- a/packages/reports/src/Components/index.js
+++ b/packages/reports/src/Components/index.js
@@ -1,3 +1,3 @@
-import EmptyPortfolioMessage from './empty-portfolio-message.jsx';
+import EmptyPortfolioMessage from './empty-portfolio-message';
 
 export default EmptyPortfolioMessage;