'How does a re-render affect useRef values

At the top of my component I define a variable with useRef like below.

const data = {
    item1 : useRef (null),
}
console.log (data['item1'].current?.srcObject)

Now as the logic proceeds through the component the value for item1 is set up. The ref is attached to a video element. And at certain points the component re-renders. The console.log prints the value of the srcObject upon the first re-render and the second. But on the third that value is lost. The srcObject is not explicitly changed in between the re-renders.

I don't fully understand refs but I'd like to know how these values are retained or destroyed. Of course I get that they maybe case specific but I'd still like to get the general idea.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source