React Component Collapsing Issue: Ref Not Initialized During URL Parsing

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!React Component Collapsing Issue: Ref Not Initialized During URL Parsing

I have a component that should expand if it is selected. Here's my current approach:
Element
ref={elementRef}
/

Element
ref={elementRef}
/

Now, I've added routing, which parses the URL. For example, if I am at host:port/selected/1, the first element should automatically expand.
The URL parsing works fine, but it happens just at the beginning of the creation of the website.
isSelected
true
null
Or to put it in different words: the scrollHeight of a non-rendered object doesn't make sense and React tells me so.
I'm struggling to figure out the best way to handle this. I think I need to use a different hook than useRef, but which one?
I tried using useState with the dependencies isSelected and elementRef which is not fired after rendering, but before (or during).
useState
isSelected
elementRef

Tags: javascript,reactjs,jsx,react-refSource of the question:

Question and source license information: