diff --git a/components/DatePicker/index.tsx b/components/DatePicker/index.tsx
index b115a163d..9cf6b3446 100644
--- a/components/DatePicker/index.tsx
+++ b/components/DatePicker/index.tsx
@@ -33,9 +33,18 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
 
   const [isSelectingFrom, setIsSelectingFrom] = useState(true)
 
-  function close() {
+  const close = useCallback(() => {
+    if (!selectedDate.toDate) {
+      setValue(name, {
+        fromDate: selectedDate.fromDate,
+        toDate: dt(selectedDate.fromDate).add(1, "day").format("YYYY-MM-DD"),
+      })
+
+      setIsSelectingFrom(true)
+    }
+
     setIsOpen(false)
-  }
+  }, [name, setValue, selectedDate])
 
   function showOnFocus() {
     setIsOpen(true)
@@ -72,19 +81,10 @@ export default function DatePickerForm({ name = "date" }: DatePickerFormProps) {
   const closeIfOutside = useCallback(
     (target: HTMLElement) => {
       if (ref.current && target && !ref.current.contains(target)) {
-        if (!selectedDate.toDate) {
-          setValue(name, {
-            fromDate: selectedDate.fromDate,
-            toDate: dt(selectedDate.fromDate)
-              .add(1, "day")
-              .format("YYYY-MM-DD"),
-          })
-          setIsSelectingFrom(true)
-        }
-        setIsOpen(false)
+        close()
       }
     },
-    [setIsOpen, setValue, setIsSelectingFrom, selectedDate, name, ref]
+    [close, ref]
   )
 
   function closeOnBlur(evt: FocusEvent) {