React useState and useEffect hook: URL and corresponding component rendering not matching

Question

I have a component in my app which handles two things,

The layout (mobile vs desktop) of the app as well as the navigation in it. This is a class implementation.