Call separate functions as per device orientation

I am looking for a solution to call different functions as per orientation

if (window.innerHeight > window.innerWidth) {
  alert("You are in portrait mode");
  <Portrait />
}

if (window.innerHeight < window.innerWidth) {
  alert("You are in landscape mode"); 
  <Landscape />
}

Written the following functions

export default function Landscape() {
  return (
    <main>...</main>
  );
}

function Portrait() {
  return (
    <main>...</main>
  );
}

Problem

• Every time, only Landscape function getting called (I understand because I mentioned default)
• Atleast, I was expecting Portrait function to be called, when device in portrait mode

Please help to get it done