diff --git a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
deleted file mode 100644
index ddae60f2e40e..000000000000
--- a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.jsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon } from '@deriv/components';
-
-const CalendarIcon = ({ onClick }) => <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />;
-
-CalendarIcon.propTypes = {
-    onClick: PropTypes.func,
-};
-
-export default CalendarIcon;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx
new file mode 100644
index 000000000000..5115ae575d28
--- /dev/null
+++ b/packages/reports/src/Components/Form/CompositeCalendar/calendar-icon.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from '@deriv/components';
+
+type TCalendarIcon = {
+    onClick: () => void;
+};
+
+const CalendarIcon = ({ onClick }: TCalendarIcon) => (
+    <Icon onClick={onClick} icon='IcCalendarDatefrom' className='inline-icon' />
+);
+
+export default CalendarIcon;
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
index 875fb85cfe0b..b409a1b88d24 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
@@ -7,7 +7,7 @@ import { daysFromTodayTo, epochToMoment, toMoment } from '@deriv/shared';
 import { connect } from 'Stores/connect';
 import CompositeCalendarMobile from './composite-calendar-mobile.jsx';
 import SideList from './side-list.jsx';
-import CalendarIcon from './calendar-icon.jsx';
+import CalendarIcon from './calendar-icon';
 
 const TwoMonthPicker = Loadable({
     loader: () => import(/* webpackChunkName: "two-month-picker" */ './two-month-picker.jsx'),
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/index.js b/packages/reports/src/Components/Form/CompositeCalendar/index.js
index d8d748d8a924..b524dbf0caef 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/index.js
+++ b/packages/reports/src/Components/Form/CompositeCalendar/index.js
@@ -1 +1,3 @@
-export default from './composite-calendar.jsx';
+import CalendarIcon from './calendar-icon';
+
+export default CalendarIcon;