GREG-60: Switching back to having date picker in a controller

frontend/src/routes/register/index.tsx

@@ -17,12 +17,12 @@ type RegisterFormData = {
   date_of_birth: Date
   national_id_number: string
   role_type: string
+  role_start: Date
 }
 
 export default function Register() {
   const { t } = useTranslation(['common'])
   const [roletypes, setRoletypes] = useState<any[]>([])
-  const [date, setDate] = useState<any>(null)
 
   useEffect(() => {
     async function fetchRoletypes() {
@@ -65,16 +65,11 @@ export default function Register() {
   const {
     register,
     control,
-    setValue,
     handleSubmit,
     formState: { errors },
   } = useForm<RegisterFormData>()
   const onSubmit = handleSubmit(submit)
 
-  useEffect(() => {
-    register('date_of_birth')
-  }, [register])
-
   return (
     <LocalizationProvider dateAdapter={AdapterDateFns}>
       <Page header='Register as a guest'>
@@ -96,18 +91,27 @@ export default function Register() {
                 })}
               />
 
-              <DatePicker
-                mask='____-__-__'
-                label={t('input.dateOfBirth')}
-                value={date}
-                inputFormat='yyyy-MM-dd'
-                onChange={(value) => {
-                  setDate(value)
-                  setValue('date_of_birth', value, { shouldValidate: true, shouldDirty: true })
-                }}
-                renderInput={(params) => <TextField {...params} />}
+              <Controller name='date_of_birth'
+                          control={control}
+                          defaultValue={undefined}
+                          rules={{
+                            required: t(
+                              'validation.roleTypeRequired').toString(),
+                          }}
+                          render={({ field }) => (
+                            <DatePicker
+                              mask='____-__-__'
+                              label={t('input.dateOfBirth')}
+                              value={field.value}
+                              inputFormat='yyyy-MM-dd'
+                              onChange={(value) => {
+                                field.onChange(value)
+                              }}
+                              renderInput={(params) => <TextField {...params} />}
+                            />)}
               />
 
+
               <TextField
                 id='nationalIdNumber'
                 label={t('input.nationalIdNumber')}
@@ -147,13 +151,14 @@ export default function Register() {
                               <MenuItem value={undefined}>{undefined}</MenuItem>
                               {
                                 roletypes.map((roletype) => (
-                                <MenuItem value={roletype.identifier}>{roletype.name_nb}</MenuItem>
+                                  <MenuItem value={roletype.identifier}>{roletype.name_nb}</MenuItem>
                                 ))
                               }
                             </Select>
                           )
                           } />
 
+
               <Button
                 type='submit'
                 data-testid='register-submit'