diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
index 2ae2b3a32c2..becc2f4a613 100644
--- a/src/components/DatePicker/DatePicker.tsx
+++ b/src/components/DatePicker/DatePicker.tsx
@@ -65,18 +65,11 @@ 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);
   }, []);
@@ -92,13 +85,16 @@ 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));
-    setNewRange(range);
-  }, []);
+      setHoverDate(end);
+      setFocusDate(new Date(end));
+      onChange(range);
+    },
+    [onChange],
+  );
 
   const handleMonthChangeClick = useCallback(
     (month: Months, year: Year) => {