diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
index 56a54ddd274..958590d579a 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/InviteMembersForm.tsx
@@ -42,7 +42,8 @@ export const InviteMembersForm = (props: InviteMembersFormProps) => {
     label: localizationKeys('formFieldLabel__emailAddresses'),
   });
 
-  const roleField = useFormControl('role', '', {
+  const defaultRole = useDefaultRole();
+  const roleField = useFormControl('role', defaultRole ?? '', {
     label: localizationKeys('formFieldLabel__role'),
   });
 
@@ -188,8 +189,6 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
 
   const { t } = useLocalizations();
 
-  const defaultRole = useDefaultRole();
-
   return (
     <Form.ControlRow elementId={field.id}>
       <Flex
@@ -198,7 +197,6 @@ const AsyncRoleSelect = (field: ReturnType<typeof useFormControl<'role'>>) => {
       >
         <RoleSelect
           {...field.props}
-          value={field.props.value || (defaultRole ?? '')}
           roles={options}
           isDisabled={isLoading}
           onChange={value => field.setValue(value)}