[IMPROVE] Improve the add user drop down for add a user in create channel modal for UserAutoCompleteMultiple (#23766)

* Adding the new UI

* Correcting

* Adding the key

* Adding the listenners

* Lint

* Lint

* Lint

* adding a eslint-disable

* lint

* lint

Co-authored-by: Jean <45966964+Jeanstaquet@users.noreply.github.com>
Co-authored-by: Jeanstaquet <jean.staquet8@gmail.com>

client/components/UserAutoCompleteMultiple/UserAutoCompleteMultiple.js

@@ -4,7 +4,6 @@ import React, { memo, useMemo, useState } from 'react';
 
 import { useEndpointData } from '../../hooks/useEndpointData';
 import UserAvatar from '../avatar/UserAvatar';
-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}
 		/>