add validation to date picker

src/core/components/MuiDatePicker.jsx

@@ -23,6 +23,7 @@ function ButtonField(props) {
         <Button
             sx={{width: "100%", padding: 0.8}}
             variant="outlined"
+            color={props.slotProps.formik.touched.date_of_birth && Boolean(props.slotProps.formik.errors.date_of_birth) ? "error" : "primary"}
             id={id}
             disabled={disabled}
             ref={ref}
@@ -43,6 +44,7 @@ function ButtonDatePicker(props) {
             slots={{field: ButtonField, ...props.slots}}
             disableFuture
             slotProps={{
+                formik: props.formik,
                 field: {setOpen},
                 textField: {
                     helperText: props.formik.errors.date_of_birth ? `${t("birthday_error")}` : null
@@ -58,15 +60,15 @@ function ButtonDatePicker(props) {
 
 export default function PickerWithButtonField({formik, error, helperText}) {
     const [value, setValue] = useState(null);
-
+    const er = formik.errors
     return (
-        <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
-            <FormControl
-                variant={"outlined"}
-                fullWidth
-                size="small"
-                error={error}
-            >
+        <FormControl
+            variant={"outlined"}
+            fullWidth
+            size="small"
+            error={true}
+        >
+            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
                 <ButtonDatePicker
                     label={value == null ? null : moment(value)
                         .locale("fa")
@@ -74,12 +76,13 @@ export default function PickerWithButtonField({formik, error, helperText}) {
                     value={value}
                     formik={formik}
                     onChange={(newValue) => {
+                        formik.setFieldValue("date_of_birth", newValue)
                         setValue(newValue)
                     }}
 
                 />
-                <FormHelperText>{helperText}</FormHelperText>
-            </FormControl>
-        </LocalizationProvider>
+            </LocalizationProvider>
+            <FormHelperText>{formik.touched.date_of_birth && formik.errors.date_of_birth}</FormHelperText>
+        </FormControl>
     );
 }