Detect if Virtual Keyboard is open in web app using React

use-is-virtual-keyboard-open.ts

const useIsVirtualKeyboardVisible = () => {
    const [isVirtualKeyboardVisible, setIsVirtualKeyboardVisible] = React.useState(false);

    React.useEffect(() => {
        // probably incomplete, good enough for me
        const inputTypesThatOpenTheVirtualKeyboard = ['text', 'email', 'password', 'number', 'search'];

        const handleFocus = (event: Event) => {
            if (
                event.target instanceof HTMLTextAreaElement ||
                (event.target instanceof HTMLInputElement &&
                    inputTypesThatOpenTheVirtualKeyboard.includes(event.target.type))
            ) {
                setIsVirtualKeyboardVisible(true);
            }
        };

        const handleFocusOut = () => {
            setIsVirtualKeyboardVisible(false);
        };

        window.addEventListener('focusin', handleFocus, true);
        window.addEventListener('focusout', handleFocusOut, true);

        return () => {
            window.removeEventListener('focusin', handleFocus, true);
            window.removeEventListener('focusout', handleFocusOut, true);
        };
    }, []);

    return isVirtualKeyboardVisible;
};