diff --git a/src/components/ProfileCalendar/ProfileCalendar.jsx b/src/components/ProfileCalendar/ProfileCalendar.jsx
index 52a863ad..e29d46c0 100644
--- a/src/components/ProfileCalendar/ProfileCalendar.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendar.jsx
@@ -36,11 +36,16 @@ export const ProfileCalendar = () => {
   const [reports, setReports] = useState([]);
   const [totalHours, setTotalHours] = useState(0);
   const [loader, setLoader] = useState(true);
+  const [startRangeDays, setStartRangeDays] = useState(false);
 
   function setValueHandler(value) {
     setValue(value);
   }
 
+  function toggleStartRangeDays() {
+    setStartRangeDays(!startRangeDays);
+  }
+
   useEffect(() => {
     dispatch(setRequestDate(getReports(moment())));
   }, []);
@@ -115,6 +120,8 @@ export const ProfileCalendar = () => {
                 value={value}
                 reports={reports}
                 totalHours={totalHours}
+                startRangeDays={startRangeDays}
+                toggleRangeDays={toggleStartRangeDays}
               />
             </div>
           </div>
diff --git a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
index abdf03f2..7d1b5229 100644
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@@ -31,7 +31,14 @@ import rectangle from "assets/images/rectangle__calendar.png";
 
 // eslint-disable-next-line react/display-name
 export const ProfileCalendarComponent = React.memo(
-  ({ value, setValueHandler, reports, totalHours }) => {
+  ({
+    value,
+    setValueHandler,
+    reports,
+    totalHours,
+    startRangeDays,
+    toggleRangeDays,
+  }) => {
     const dispatch = useDispatch();
 
     const [currentDay] = useState(moment());
@@ -40,7 +47,6 @@ export const ProfileCalendarComponent = React.memo(
     const [shortReport, setShortReport] = useState(false);
     const [startDate, setStartDate] = useState(null);
     const [endDate, setEndDate] = useState(null);
-    const [startRangeDays, setStartRangeDays] = useState(false);
     const [totalRangeHours, setTotalRangeHours] = useState(0);
     const [selectedRangeDays, setSelectedRangeDays] = useState({});
 
@@ -269,7 +275,7 @@ export const ProfileCalendarComponent = React.memo(
             className="select"
             onClick={() => {
               if (startRangeDays) resetRangeDays();
-              setStartRangeDays(!startRangeDays);
+              toggleRangeDays();
             }}
           >
             {endDate