Using useRef to update a variable with an array in my Context and then pass it down to another component. Problem is, I noticed that useRef updates said variable in ComponentA.

However when I try to access said variable in ComponentB this is what I see in my console log:

useEffect useRef is it working?: 
{current: Array(0)}
current: (3) ['testingUser', 'testing', 'value']
[[Prototype]]: Object

My question is that, I see the values I updated using useRef while at the same time, when I try to access these values using availableOnlineUsers.current I just see a blank array

Here is my code in ComponentA:

...
availableOnlineUsers.current = availUsers
...

console log at this point returns:

(3) ['testingUser', 'testing', 'value']

This is my code in my Context:

...
const availableOnlineUsers = useRef([])
...

and in ComponentB this:

console.log(availableOnlineUsers.current)

returns an empty array

While this:

console.log(availableOnlineUsers)

returns:

{current: Array(0)}
current: (3) ['testingUser', 'testing', 'value']
[[Prototype]]: Object