diff --git a/UNRELEASED.md b/UNRELEASED.md
index a9004d3892f..811457c8c37 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -12,6 +12,9 @@
 - Prevented scrolling to `Popover` content in development ([#2403](https://github.com/Shopify/polaris-react/pull/2403))
 - Fixed an issue which caused HSL colors to not display in Edge ([#2418](https://github.com/Shopify/polaris-react/pull/2418))
 - Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of its container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
+- Fixed an issue which caused HSL colors to not display in Edge ((#2418)[https://github.com/Shopify/polaris-react/pull/2418])
+- Fixed an issue where the dropzone component jumped from an extra-large layout to a layout based on the width of it's container ([#2412](https://github.com/Shopify/polaris-react/pull/2412))
+- Fixed a race condition in DatePicker ([#2373](https://github.com/Shopify/polaris-react/pull/2373))
 
 ### Documentation
 
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) => {