feat(WEB-169): get profile data from API

components/TempDesignSystem/Form/Country/index.tsx

@@ -35,21 +35,8 @@ export default function CountrySelect({
     name,
     rules: registerOptions,
   })
-  const [selectedKey, setSelectedKey] = useState(() => {
-    if (field.value) {
-      const selected = countries.find(
-        (country) =>
-          country.name === field.value || country.code === field.value
-      )
-      if (selected) {
-        return selected.name
-      }
-    }
-    return ""
-  })
 
   function handleChange(country: Key) {
-    setSelectedKey(String(country))
     setValue(name, country)
   }
 
@@ -69,7 +56,7 @@ export default function CountrySelect({
         onBlur={field.onBlur}
         onSelectionChange={handleChange}
         ref={field.ref}
-        selectedKey={selectedKey}
+        selectedKey={field.value}
       >
         <div className={styles.comboBoxContainer}>
           <Input
@@ -101,7 +88,7 @@ export default function CountrySelect({
               <ListBoxItem
                 aria-label={country.name}
                 className={styles.listBoxItem}
-                id={country.name}
+                id={country.code}
                 key={`${country.code}-${idx}`}
               >
                 {country.name}