I have a page on react, where I have so that when the user is on a desktop screen size, it shows both components together, but on smaller screens it shows only one with the ability to switch. Right now I'm using a custom hook that returns a boolean called desktop (true if desktop size, false if not). I'm also using a state variable to track the change between components.

{!desktop ?
   switch ?
         <>{List}</>
      :
         <>{Map}</>
   : 
   <>{Map}{List}</>
}

When switching between desktop/not, it resets the state on both components. I understand that this is what the above code is supposed to do, because you're rendering a new instance of the component.

My question is there a better way to achieve my desired outcome with a different conditional render? And if not is there a way to preserve the state when desktop does switch? Any help would be greatly appreciated!