The useRef Hook lets us create mutable variables inside functional components.
A ref created with useRef will be created only when the component has been mounted and preserved during the full lifecycle.
Refs can be used for accessing DOM nodes or React elements, and for keeping mutable variables (like instance variables in class components or timing events).
Updating a ref is a side effect so it should be done only inside an useEffect (or useLayoutEffect) or inside an event handler.