diff --git a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
index b409a1b88d24..1a1dedb9e036 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/composite-calendar.jsx
@@ -6,7 +6,7 @@ import { localize } from '@deriv/translations';
 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 SideList from './side-list';
 import CalendarIcon from './calendar-icon';
 
 const TwoMonthPicker = Loadable({
diff --git a/packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx b/packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
similarity index 67%
rename from packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
rename to packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
index 9a4fce6b10a1..465710afbfad 100644
--- a/packages/reports/src/Components/Form/CompositeCalendar/side-list.jsx
+++ b/packages/reports/src/Components/Form/CompositeCalendar/side-list.tsx
@@ -1,16 +1,28 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { toMoment } from '@deriv/shared';
 import ListItem from './list-item.tsx';
 
-const isActive = (from, to, flag) => {
+type TItem = {
+    value: string;
+    label: string;
+    onClick: () => void;
+    duration: number;
+};
+
+type TSideList = {
+    from: number;
+    items: Array<TItem>;
+    to: number;
+};
+
+const isActive = (from: number, to: number, flag: number) => {
     if (flag === 0) {
         return toMoment().endOf('day').unix() === to && from === null;
     }
     return Math.ceil(to / 86400) - Math.ceil(from / 86400) === flag;
 };
 
-const SideList = ({ items, from, to }) => (
+const SideList = ({ items, from, to }: TSideList) => (
     <ul className='composite-calendar__prepopulated-list'>
         {items.map(item => {
             const { duration, ...rest_of_props } = item;
@@ -20,10 +32,4 @@ const SideList = ({ items, from, to }) => (
     </ul>
 );
 
-SideList.propTypes = {
-    from: PropTypes.number,
-    items: PropTypes.array,
-    to: PropTypes.number,
-};
-
 export default SideList;