diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index becc2f4a613..2ae2b3a32c2 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -65,11 +65,18 @@ export function DatePicker({
   const i18n = useI18n();
   const [hoverDate, setHoverDate] = useState<Date | undefined>(undefined);
   const [focusDate, setFocusDate] = useState<Date | undefined>(undefined);
+  const [newRange, setNewRange] = useState<Range | undefined>(undefined);
 
   useEffect(() => {
     setFocusDate(undefined);
   }, [selected]);
 
+  useEffect(() => {
+    if (newRange) {
+      onChange(newRange);
+    }
+  }, [newRange, onChange]);
+
   const handleFocus = useCallback((date: Date) => {
     setFocusDate(date);
   }, []);
@@ -85,16 +92,13 @@ export function DatePicker({
     [onMonthChange],
   );
 
-  const handleDateSelection = useCallback(
-    (range: Range) => {
-      const {end} = range;
+  const handleDateSelection = useCallback((range: Range) => {
+    const {end} = range;
 
-      setHoverDate(end);
-      setFocusDate(new Date(end));
-      onChange(range);
-    },
-    [onChange],
-  );
+    setHoverDate(end);
+    setFocusDate(new Date(end));
+    setNewRange(range);
+  }, []);
 
   const handleMonthChangeClick = useCallback(
     (month: Months, year: Year) => {