feat(WEB-163): edit profile field validation

components/TempDesignSystem/Form/Country/index.tsx

@@ -1,10 +1,8 @@
 "use client"
-import { ErrorMessage } from "@hookform/error-message"
 import { useState } from "react"
 import {
   Button,
   ComboBox,
-  FieldError,
   Input,
   type Key,
   ListBox,
@@ -18,6 +16,7 @@ import Label from "@/components/TempDesignSystem/Form/Label"
 import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron"
 import Body from "@/components/TempDesignSystem/Text/Body"
 
+import ErrorMessage from "../ErrorMessage"
 import { countries } from "./countries"
 
 import styles from "./country.module.css"
@@ -42,7 +41,7 @@ export default function CountrySelect({
     }
   }
   const { control, setValue } = useFormContext()
-  const { field } = useController({
+  const { field, fieldState, formState } = useController({
     control,
     name,
     rules: registerOptions,
@@ -60,6 +59,7 @@ export default function CountrySelect({
         aria-label={formatMessage({ id: "Select country of residence" })}
         className={styles.select}
         isRequired={!!registerOptions?.required}
+        isInvalid={fieldState.invalid}
         name={field.name}
         onBlur={field.onBlur}
         onSelectionChange={handleChange}
@@ -85,9 +85,7 @@ export default function CountrySelect({
             <SelectChevron />
           </Button>
         </div>
-        <FieldError>
-          <ErrorMessage name={name} />
-        </FieldError>
+        <ErrorMessage errors={formState.errors} name={name} />
         <Popover
           className={styles.popover}
           placement="bottom"