save date-picker in page special-days

app/component/TimePickerInput.js

@@ -3,9 +3,7 @@ import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
 import { LocalizationProvider, TimePicker } from "@mui/x-date-pickers";
 import { handleTwoLength } from "@/helper";
 
-function TimePickerInput() {
-  const [value, setValue] = useState("00:00");
-
+function TimePickerInput({ changeData, name, data }) {
   return (
     <div className="w-full relative">
       <LocalizationProvider dateAdapter={AdapterDayjs}>
@@ -21,7 +19,8 @@ function TimePickerInput() {
             const newValue = `${handleTwoLength(hours)}:${handleTwoLength(
               minute
             )}`;
-            setValue(newValue);
+            // setValue(newValue);
+            changeData(newValue, name);
           }}
           sx={{
             "& .MuiFormLabel-root": {
@@ -50,7 +49,7 @@ function TimePickerInput() {
           className="absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px] 
             w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2"
         >
-          {value}
+          {data}
         </p>
       </LocalizationProvider>
     </div>