i've got a problem that don't know how to deal with. I'm using HCaptcha component for verification and after the user clicks on the checkbox in order to verify, my 'keydown' eventListener does not work anymore. apparantly the problem is that HCaptcha is rendering in iframe and the page loses focus after checking it. Any one got any ideas? Thanks for your help.

     useEffect(() => {
        const listener = event => {
            if (event.code === 'Enter' || event.code === 'NumpadEnter') {
                event.preventDefault();
                btnRef.current?.click();
            }
        };
        document.addEventListener('keydown', listener);
        return () => {
            document.removeEventListener('keydown', listener);
        };
    }, []);

     return (
                    <div className="auth-footer">
                        <HCaptcha
                            sitekey={window._env_.hCaptchaSiteKey}
                            onVerify={token => {
                                setCapchaToken(token);
                                formRef.current?.focus();
                            }}
                            ref={captchaRef}
                        />
                        <div className="tw-my-6">
                            <Button
                                ref={btnRef}
                                type="button"
                                disabled={formValidation()}
                                onClick={handleSubmit}
                                loading={loading}
                                className="btn reset-password-submit">
                                ارسال کد
                            </Button>
                        </div>
                    </div>
)