diff --git a/ee/client/audit/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js b/ee/client/audit/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
index 2433d08d344a..5020907ee170 100644
--- a/ee/client/audit/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
+++ b/ee/client/audit/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js
@@ -4,7 +4,6 @@ import React, { memo, useMemo, useState } from 'react';
 
 import UserAvatar from '../../../../client/components/avatar/UserAvatar';
 import { useEndpointData } from '../../../../client/hooks/useEndpointData';
-import Avatar from './Avatar';
 
 const query = (term = '') => ({ selector: JSON.stringify({ term }) });
 
@@ -40,8 +39,15 @@ const UserAutoCompleteMultiple = (props) => {
 					</Chip>
 				))
 			}
-			renderItem={({ value, ...props }) => (
-				<Option key={value} {...props} avatar={<Avatar value={value} />} />
+			renderItem={({ value, label, ...props }) => (
+				<Option key={value} {...props}>
+					<Option.Avatar>
+						<UserAvatar username={value} size='x20' />
+					</Option.Avatar>
+					<Option.Content>
+						{label} <Option.Description>({value})</Option.Description>
+					</Option.Content>
+				</Option>
 			)}
 			options={options}
 		/>