I have a function in my context that takes in two data points, the current username and the username of a randomly selected user who is online

const pairProgrammingMatching = (username, matchedUser) => {
    setPairUsers({username: matchedUser })
}

I call this function in another component using useEffect()

    useEffect((() => {
        console.log('curr username is', username)
        pairProgrammingMatching(username, checkOnlineUsers(pickRandom()).username)
        console.log('inside pairUsers state', pairUsers)
    }), [])

checkOnlineUsers simply returns a list of all users who are currently online and active

let checkOnlineUsers = () => {
    const results = onlineUsers.filter(obj => {
        return obj.profile.is_online === true && obj.profile.currently_active === false && obj.username !== user.username
    })
    return results
}

Here's a sample of what this function returns

[{ email: "***@gmail.com"
   first_name: ""
   last_name: ""
   profile: {city: 'Washington DC', country: 'USA', is_online: true, currently_active: false}
   username: "testingUser" }]

pickRandom simply picks a number between 0 and n, with n being the number of users returned in checkOnlineUsers:

const pickRandom = () => {
    return Math.round(Math.random()*onlineUsers.length)
}

The problem here is that if I print out pairUsers inside my useEffect I expect to see this:

{ 'userA': 'testingUser' }

with userA being the name of the current user. However this is what I get:

{username: undefined}