Make email field validate on change again

Switches from using a Controller to the simpler uncontrolled setup. Label has been set to be permanently shrunk since mui refuses to realise that the field has input when using rhf's setValue. Validation now happens onChange, alerting the user while typing. Submit button is disabled if you have not touched the field and when the content of the field is an invalid email. After submissions, the new value is treated as the default, disabling the save button until the field has been touched again.

Resolves: GREG-196

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -147,7 +147,7 @@ const PersonLine = ({ person, role }: PersonLineProps) => {
   const [t] = useTranslation(['common'])
 
   return (
-    <StyledTableRow key={`${person.first} ${person.last}`}>
+    <StyledTableRow>
       <TableCell component="th" scope="row">
         {`${person.first} ${person.last}`}
       </TableCell>
@@ -190,7 +190,11 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
           {guests.length > 0 ? (
             guests.map((person) =>
               person.roles.map((role) => (
-                <PersonLine role={role} person={person} />
+                <PersonLine
+                  key={`${person.first} ${person.last} ${role.id}`}
+                  role={role}
+                  person={person}
+                />
               ))
             )
           ) : (