education and occupation inputs and their validation

src/core/components/MuiDatePicker.jsx

@@ -58,7 +58,7 @@ function ButtonDatePicker(props) {
     );
 }
 
-export default function PickerWithButtonField({formik, error, helperText}) {
+export default function PickerWithButtonField({formik}) {
     const [value, setValue] = useState(null);
     return (
         <FormControl
@@ -75,8 +75,10 @@ export default function PickerWithButtonField({formik, error, helperText}) {
                     value={value}
                     formik={formik}
                     onChange={(newValue) => {
-                        formik.setFieldValue("birthday", newValue)
+                        const formattedBirthday = moment(newValue).locale("fa").format("YYYY-MM-DD")
+                        formik.setFieldValue("birthday", formattedBirthday)
                         setValue(newValue)
+                        console.log(formattedBirthday)
                     }}
 
                 />

src/core/components/PlateNumber.jsx

@@ -123,14 +123,15 @@ const plate_words = [
 const PlateNumber = ({formik}) => {
     const t = useTranslations();
     const [plateDrawer, setPlateDrawer] = useState(false);
-    const isValidPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
+    const isErrorPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
+    const isTouched = (formik.touched.plate_part1 || formik.touched.plate_part3 || formik.touched.plate_part4)
     return (
         <>
             <Stack direction={'row'}
                    sx={{
                        border: 1,
                        overflow: 'hidden',
-                       borderColor: isValidPlate ? 'error.main' : 'divider',
+                       borderColor: (isTouched && isErrorPlate) ? 'error.main' : 'divider',
                        borderRadius: 1
                    }}>
                 <TextField
@@ -223,7 +224,7 @@ const PlateNumber = ({formik}) => {
                 </Stack>
             </Stack>
             <FormHelperText
-                error={isValidPlate}>{isValidPlate ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
+                error={(isTouched && isErrorPlate)}>{(isTouched && isErrorPlate) ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
         </>
 
     )

src/core/components/SelectBox.jsx

@@ -42,8 +42,8 @@ function SelectBox({
                     </MenuItem>
                 ) : (
                     selectors.map((selector) => (
-                        <MenuItem key={selector.id} value={selector.value}>
-                            {selector.name}
+                        <MenuItem key={selector.id} value={selector.value || selector.id}>
+                            {selector.name || selector.title}
                         </MenuItem>
                     ))
                 )}