hook up onChange

components/dateSelect.js

@@ -17,19 +17,17 @@ const fetcher = (path) => fetch(path).then((r) => r.json())
 
 export default function DateSelect() {
   const { state, onChange } = useContext(WizardContext)
-  const [range, setRange] = useState({ form: null, to: null })
+  const [range, setRange] = useState({
+    form: state.startDate && new Date(state.StartDate),
+    to: state.endDate && new Date(state.endDate),
+  })
+  const { from, to } = range
   const { data: daysBooked, error: fetchBookedOnError } = useSWR(
     '/api/daysbooked',
     fetcher
   )
-  const prevBookedDay = getNextSmaller(
-    daysBooked,
-    dateFormat(range.from || range.to)
-  )
-  const nextBookedDay = getNextBigger(
-    daysBooked,
-    dateFormat(range.from || range.to)
-  )
+  const prevBookedDay = getNextSmaller(daysBooked, dateFormat(from || to))
+  const nextBookedDay = getNextBigger(daysBooked, dateFormat(from || to))
 
   const fromRef = useRef()
   const toRef = useRef()
@@ -53,9 +51,12 @@ export default function DateSelect() {
 
   useEffect(() => {
     toRef.current?.getInput().focus()
-  }, [range.from])
+  }, [from])
+
+  useEffect(() => {
+    onChange({ startDate: from?.toISOString(), endDate: to?.toISOString() })
+  }, [from, to])
 
-  const { from, to } = range
   const disabledDays = [dayDisabled]
   const modifiers = {
     dayBooked,