Add label to email field

frontend/src/routes/sponsor/guest/guestInfo/index.tsx

@@ -22,7 +22,7 @@ import {
 import { Guest } from 'interfaces'
 import SponsorInfoButtons from 'routes/components/sponsorInfoButtons'
 import { useEffect, useState } from 'react'
-import { SubmitHandler, useForm } from 'react-hook-form'
+import { SubmitHandler, useForm, Controller } from 'react-hook-form'
 import IdentityLine from 'components/identityLine'
 import { isValidEmail, submitJsonOpts } from 'utils'
 
@@ -93,13 +93,19 @@ export default function GuestInfo({
   const [confirmationDialogOpen, setConfirmationDialogOpen] = useState(false)
   const [emailDirty, setEmailDirty] = useState(false)
 
+  const defaultValues = {
+    email: guest.email,
+  }
   // Using useForm even though only the e-mail is allow to change at present, since useForm makes setup and validation easier
   const {
-    register,
     handleSubmit,
     setValue,
+    control,
     formState: { errors },
-  } = useForm<Email>({ mode: 'onChange' })
+  } = useForm({
+    mode: 'onChange',
+    defaultValues,
+  })
 
   useEffect(() => {
     setValue('email', guest.email)
@@ -150,6 +156,7 @@ export default function GuestInfo({
   }
 
   const emailFieldChange = (event: any) => {
+    setValue('email', event.target.value)
     if (event.target.value !== guest.email) {
       setEmailDirty(true)
     } else {
@@ -188,14 +195,23 @@ export default function GuestInfo({
                     justifyContent: 'flex-start',
                   }}
                 >
-                  <TextField
-                    id="email"
-                    error={!!errors.email}
-                    helperText={errors.email && errors.email.message}
-                    {...register(`email`, {
+                  <Controller
+                    name="email"
+                    control={control}
+                    rules={{
                       validate: isValidEmail,
-                    })}
-                    onChange={emailFieldChange}
+                    }}
+                    render={({ field: { value }, ...rest }) => (
+                      <TextField
+                        id="email"
+                        label={t('input.email')}
+                        error={!!errors.email}
+                        helperText={errors.email && errors.email.message}
+                        value={value}
+                        {...rest}
+                        onChange={emailFieldChange}
+                      />
+                    )}
                   />
 
                   {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}