User picker displays non human users

[chicofaccin]

Hi everybody.
I’m using the ui kit user picker https://developer.atlassian.com/platform/forge/ui-kit/components/user-picker/.

import { Stack, UserPicker } from '@forge/react';
import React, { useState } from 'react';

export default function Select() {

    const [users, setUsers] = useState([])

    return (
        <>
            <Stack>
                <UserPicker
                    defaultValue={ users }
                    id="usersIds"
                    isMulti="true"
                    placeholder="Select users"
                    onChange={ (users) => {
                        console.log('users', users)
                        setUsers(users.map(user => user.id))
                    } }
                    label="Select users"
                    description="Users">
                </UserPicker>
            </Stack>
        </>
    )
}

This is the list of the users that I have in my confluence:

However, when the component is rendered, many other users are displayed:

When the console.log is executed, if I select the user “Trello”, the content below is printed:

[
    {
        "id": "user_id",
        "type": "user",
        "avatarUrl": "https://secure.gravatar.com/avatar/......",
        "name": "Trello",
        "tooltip": "Trello",
        "isExternal": false
    }
]

Why Trello is an user? Is there a way to list only the confluence users?

[Alexandr]

It is connected app users, Atlassian does not provide a special prop to filter it.

I see only one way to fix it - try to write a custom user picker