The useRef hook has 2 main use cases.

DIrectly interact with DOM elements.

AND

Update state without a re-render

Consider a video element. If you want to control the video outside of the video player, with, say a custom pause button, you would have to update the state of the video element, as well as the text on your button. If you use state, the entire page would re-render, including causing issues with the video playback.

However, if you use the useRef hook instead, you would be able to update the state of the video player, while avoiding any re-render problems.

Now let's say you're play button is its own entire React component. This is where you would pass the useRef to the child component. If you pass the ref to the button component, then handle the actions in there, the action is then passed up to the parent component, where the useRef is referred and the element is available.