We could simply use an array that contains all users, as follows:

function OnlineUsers ({ users }) {
    const [ userInfos, setUserInfos ] = useState([])
    // ... fetch & keep userInfos up to date ...
    return (
        <div>
            {users.map(username => {
                const user = userInfos.find(u => u.username === username)
                return <UserInfo {...user} />
            })}
        </div>
    )
}

However, this might not always make sense. For example, we might not want to update the user state through the OnlineUsers component because we would have to select the correct user state from the array, and then modify the array. This might work, but it is quite tedious.