<DatePicker
                onChange={handleDatePicker}
                value={userData.passportExpiryDate || null || passportExpiryDate}
                minDate={new Date().toISOString().split('T')[0].split('-').join('/')}
                renderInput={(params: any) => (
                  <TextField
                    {...params}
                    inputProps={{
                      ...params.inputProps,
                      // readonly
                      readOnly: true,
                      placeholder: 'Select Date of Expiry',
                    }}
                    {...register('passportExpiryDate', {
                      required: true,
                    })}
                    // className="date-picker date-picker-input"
                    error={
                      (errors?.passportExpiryDate?.type === 'required' && passportExpiryDate === '')
                    }
                    sx={{
                      '& .MuiOutlinedInput-root': {
                        '& fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&:hover fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                        '&.Mui-focused fieldset': {
                          borderColor: (passportExpiryDate || !submitAttempted) ? 'grey' : 'red',
                        },
                      },
                    }}
                  />
                )}
              />