Логика скрипта с resize работает на ios иначе, чем на android

я начинающий разработчик, разрабатываю проект на Next.js и передо мною встала проблема, что логика компонента (который я опишу ниже) работает на ios иначе, чем на других устройствах.

Компонент отслеживает ширину и высоту экрана, и, если ширина меньше высоты, показывает пользователю модальное окно, с просьбой перевернуть экран. На устройствах android, windows компонент работает как я и планировал, а на устройствах ios модальное окно показывается пользователю в любом случае. Я даже не знаю, почему на ios это может работать не так, как на других устройствах и в каком направлении копать.

Подскажите, пожалуйста, что здесь не так, или стоит реализовать эту фичу как-то по-другому?

Код компонента:

"use client";
import localFont from "next/font/local";
import { Children, PropsWithChildren, useEffect, useState } from "react";
import OrientationScreen from "./OrientationScreen";
import "./loader.css";

const geometriaMedium = localFont({
  src: "../../fonts/Geometria-Medium.woff",
});

const OrientationChange = ({ children }: PropsWithChildren) => {
  const [screenWidth, setScreenWidth] = useState<number>();
  const [screenHeight, setScreenHeight] = useState<number>();

  const [isCorrectOrientation, setIsCorrectOrientation] = useState<boolean>();
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const handleResize = (event: UIEvent) => {
      setScreenWidth(window.screen.width);
      setScreenHeight(window.screen.height);
    };

    window.addEventListener("resize", handleResize, false);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  
  useEffect(() => {
    setIsCorrectOrientation(window.screen.width > window.screen.height);
    setLoading(false);
  }, [screenWidth, screenHeight]);

  if (loading) {
    return (
      <div className="loader-container">
        <div className="spinner"></div>
        <span
          className="loading text-[20px] mt-2 text-[#dd1181]"
          style={geometriaMedium.style}
        >
          Загрузка...
        </span>
      </div>
    );
  } else {
    return (
      <>
        {!isCorrectOrientation && <OrientationScreen></OrientationScreen>}
        {Children.map(children, (child) => (
          <>{child}</>
        ))}
      </>
    );
  }
};

export default OrientationChange;