diff --git a/assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx b/assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx
index f2235ac3e..a9167dcd6 100644
--- a/assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx
+++ b/assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx
@@ -34,7 +34,7 @@ interface IUsersRolesDropdownProps {
 }
 
 interface IRenderSelectProps {
-  options?: Array<{ value: number, label: ReactNode }>
+  options?: Array<{ value: string, label: ReactNode }>
   placeholder: string
   handleOnChange: any
   selectedOptions: number[]
@@ -88,6 +88,7 @@ export const UsersRolesDropdown = ({ userList, roleList, handleClose }: IUsersRo
     <Select
       mode="multiple"
       onChange={ handleOnChange }
+      optionFilterProp="value"
       options={ options }
       placeholder={ t(placeholder) }
       showSearch
@@ -98,8 +99,8 @@ export const UsersRolesDropdown = ({ userList, roleList, handleClose }: IUsersRo
   const renderUsers = (): React.JSX.Element => {
     const options = userList?.items
       ?.filter(item => userData?.id !== item.id)
-      ?.map(item => ({
-        value: item.id,
+      ?.map((item, index) => ({
+        value: `${index}-${item?.username}`,
         label: renderLabel({ labelName: item?.username, iconName: 'user' })
       }))
 
@@ -112,8 +113,8 @@ export const UsersRolesDropdown = ({ userList, roleList, handleClose }: IUsersRo
   }
 
   const renderRoles = (): React.JSX.Element => {
-    const options = roleList?.items?.map(item => ({
-      value: item.id,
+    const options = roleList?.items?.map((item, index) => ({
+      value: `${index}-${item?.name}`,
       label: renderLabel({ labelName: item?.name, iconName: 'shield' })
     }))