react calculating window sizes wrong on resize

Question

here is an example of component resize scenario logic.

// ... imports

const ComponentName = () => {

    const [loading, setLoading] = useState(true);
    const [sizes, setSizes] = useState({
        width: 0,
        height: 0,
    });

    const handleResize = useCallback((e) => {
        const ww = e === undefined ? window.innerWidth : e.target.innerWidth;
        const wh = e === undefined ? window.innerHeight : e.target.innerHeight;
        console.log("ww: ", ww);
        console.log("wh: ", wh);
        setSizes({ width: ww, height: wh });
        setLoading(false);
    }, []);

    useLayoutEffect(() => {
        window.addEventListener("resize", handleResize);
        return () => {
            window.removeEventListener("resize", handleResize);
        };
    }, [handleResize]);

    useEffect(() => {
        let mount = true;

        if (mount && loading) {
          handleResize();
        }

        return () => {
          mount = false;
        };
    }, [loading, handleResize]);

    console.log("sizes: ", sizes.width, " x ", sizes.height);

    return (
        <div>
          {/* ... render */}
        </div>
    );
};

export default ComponentName;

then i open developer tools in chrome, select device and rotate it forward and back. while rotate back i get wrong size numbers. not equal to actual device sizes.

what can it be and how i can fix this? thx.