Use FormHelperText for error messages

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

@@ -18,6 +18,7 @@ import {
   FormControlLabel,
   Box,
   Typography,
+  FormHelperText,
 } from '@mui/material'
 import Page from 'components/page'
 import { Guest } from 'interfaces'
@@ -175,7 +176,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
       </MenuItem>
     )
   }
-
+  const hasRoleTypeError =
+    errors && errors.type && errors.type.type === 'required'
+  const hasOuChoiceError =
+    errors && errors.orgunit && errors.orgunit.type === 'required'
   return (
     <Page>
       <SponsorInfoButtons
@@ -195,7 +199,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
             control={control}
             rules={{ required: true }}
             render={() => (
-              <FormControl>
+              <FormControl error={hasRoleTypeError}>
                 <InputLabel id="roletype-select-label">
                   {t('input.roleType')}
                 </InputLabel>
@@ -214,10 +218,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               </FormControl>
             )}
           />
-          {errors.type && errors.type.type === 'required' && (
-            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+          {hasRoleTypeError && (
+            <FormHelperText error>
               {t('validation.typeMustBeChosen')}
-            </Box>
+            </FormHelperText>
           )}
 
           <Controller
@@ -225,7 +229,7 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
             control={control}
             rules={{ required: true }}
             render={() => (
-              <FormControl>
+              <FormControl error={hasOuChoiceError}>
                 <InputLabel id="ou-select-label-id">
                   {t('common:ou')}
                 </InputLabel>
@@ -246,10 +250,10 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
               </FormControl>
             )}
           />
-          {errors.orgunit && errors.orgunit.type === 'required' && (
-            <Box sx={{ typography: 'caption', color: 'error.main' }}>
+          {hasOuChoiceError && (
+            <FormHelperText error>
               {t('validation.ouMustBeChosen')}
-            </Box>
+            </FormHelperText>
           )}
 
           <Controller