Added user roles functionality

src/components/Form/Select/Select.tsx

@@ -10,8 +10,6 @@ export const Select = ({ control, name, label, options }: SelectProps) => {
   } = useController({
     name,
     control,
-    rules: { required: true },
-    defaultValue: '',
   });
 
   return (
@@ -25,14 +23,14 @@ export const Select = ({ control, name, label, options }: SelectProps) => {
         id={name}
         onChange={field.onChange} // send value to hook form
         onBlur={field.onBlur} // notify when input is touched/blur
-        value={field.value ? field.value.toString() : ''} // input value
+        value={field.value ? field.value : ''} // input value
         name={name} // send down the input name
         ref={field.ref} // send input ref, so we can focus on input when error appear
         className="shadow-sm focus:ring-primary-500 focus:border-primary-500 block w-full sm:text-sm border-gray-300 rounded-md"
       >
-        {options?.map((value) => (
-          <option key={value} value={value}>
-            {value}
+        {options?.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.name}
           </option>
         ))}
       </select>