I’m having a problem (NextJS 12) attaching an event listener to an element that is conditionally rendered on load even though the initial state is true.

I have created a webpage and made it responsive only for horizontal phone screens. So i’ve tried to implement eventlisteners. If the phone screen is vertical, I will not display the content, however if I flip it to be horizontal, it will. I tested it on chrome responsive dev tools and it worked perfectly. However when I try it on an actual mobile phone, it does not update when I flip my phone screen horizontally and I am stuck with the black screen.