diff --git a/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx b/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx
index 812fc8f5f..0888f7ebf 100644
--- a/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx
+++ b/frontend/src/components/MapView/Layers/CompositeLayer/index.tsx
@@ -47,7 +47,6 @@ const CompositeLayer = ({ layer, before }: Props) => {
     layer.dateLayer,
     layer.expectedDataLagDays,
   );
-  console.log('selectedDate', selectedDate);
   const serverAvailableDates = useSelector(availableDatesSelector);
   const opacityState = useSelector(opacitySelector(layer.id));
   const dispatch = useDispatch();
diff --git a/frontend/src/utils/useDefaultDate.ts b/frontend/src/utils/useDefaultDate.ts
index 8ea51cdc6..21091a01e 100644
--- a/frontend/src/utils/useDefaultDate.ts
+++ b/frontend/src/utils/useDefaultDate.ts
@@ -1,6 +1,6 @@
 import { useDispatch, useSelector } from 'react-redux';
 import { useEffect, useMemo } from 'react';
-import { isMainLayer, LayerKey } from 'config/types';
+import { DateItem, isMainLayer, LayerKey } from 'config/types';
 import { availableDatesSelector } from 'context/serverStateSlice';
 import {
   dateRangeSelector,
@@ -35,13 +35,15 @@ export function useDefaultDate(
     new Date().getTime() - (expectedDataLagDays ?? 0) * 24 * 60 * 60 * 1000;
 
   const defaultDate = useMemo(() => {
-    let index = possibleDates?.length - 1;
-    let defaultDate = possibleDates?.[index]?.displayDate;
-    while (defaultDate && defaultDate > soonestAvailableDate) {
-      index -= 1;
-      defaultDate = possibleDates?.[index]?.displayDate;
-    }
-    return defaultDate;
+    return possibleDates?.reduceRight(
+      (acc: number | undefined, date: DateItem) => {
+        if (!acc && date.displayDate <= soonestAvailableDate) {
+          return date.displayDate;
+        }
+        return acc;
+      },
+      undefined,
+    );
   }, [possibleDates, soonestAvailableDate]);
 
   // React doesn't allow updating other components within another component