Use date from options or do not let react manage the value

src/components/main/routes/Options.tsx

@@ -1,9 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Input } from "@/components/ui/input";
 import { path } from "ramda";
 import { ForecastDatePicker } from "@/components/ui/DatePicker";
 
 export const Options = function ({ state, updateState }) {
+  const defaultDate = path(["options", "defaultDate"], state);
+
   return (
     <div
       className="flex flex-col p-5 bg-white border border-solid border-slate-300 rounded-lg space-y-5 w-full h-full"
@@ -24,9 +26,11 @@ export const Options = function ({ state, updateState }) {
       </label>
       <label>
         <ForecastDatePicker
-          onChange={(dateTime) =>
-            updateState({ options: { defaultDate: dateTime } })
-          }
+          dateTime={defaultDate || null}
+          onChange={(dateTime) => {
+            console.log("CHANGE", dateTime);
+            updateState({ options: { defaultDate: dateTime } });
+          }}
         />
       </label>
     </div>

src/components/ui/DatePicker.tsx

@@ -29,7 +29,7 @@ export const ForecastDatePicker = function ({
       <input
         type="date"
         defaultValue={formatDate(minDate(new Date()))}
-        value={formatDate(dateTime)}
+        value={dateTime ? formatDate(dateTime) : undefined}
         min={formatDate(minDate(new Date()))}
         max={formatDate(maxDate(new Date()))}
         onChange={(e) => onChange(e.target.valueAsDate)}