React+NextJS登录表单密码验证时输入框自动清空的问题求助

我开发了一个React+NextJS应用，登录页面加载时会用useEffect钩子询问服务器管理员账户是否存在，这会设置一个状态，进而影响加载的内容。

const [adminExists, setAdminExists] = useState(false); // <- 默认假设账户不存在    
const [submitEnabled, setSubmitEnabled] = useState(false);
const [errors, setErrors] = useState("");

useEffect(() => {
    // ... 向服务器发起请求
    setAdminExists(true/false)
})

页面的返回函数如下：

const LoginForm = () => {
    if (adminExists) {
        return (...loginForm) // 已有管理员时的登录表单
    } else {
        return (
            <div ...props>
                <h1>title</h1>
                <Form ...props>
                    <div ...props>
                        <Input ...props/> // <- 用户名输入框
                    </div>
                    <div ...props>
                        <Input ...props/> // <- 密码输入框
                    </div>
                    <div ...props>
                        <Input ...props/> // <- 确认密码输入框
                    </div>
                    <div ...props>
                        <Button ...props isDisabled={!submitEnabled}/> // <- 提交按钮
                    </div>
                    <div ...props>
                        {errors}
                    </div>
                </Form>
            </div>
        )
    }
}

return (
    <LoginForm/>
)

输入框绑定了键盘抬起事件：

onKeyUp={validatePasswords}

对应的validatePasswords函数：

const validatePasswords = (e) => {
    // 获取表单数据
    const password = form.get('password')
    const passwordConfirm = form.get('passwordConfirm')

    setSubmitEnabled(password.length > 0 && passwordConfirm.length > 0 && password === passwordConfirm)

    if (!password.startsWith(passwordConfirm)) {
        setErrors("Passwords must match")
    } else {
        setErrors("") // <- 清空错误提示
    }
}

遇到的问题： #

• 当我在输入框中输入时，如果startsWith检查通过，一切正常（符合预期）
• 当密码完全匹配时，输入框会被清空，而且提交按钮并没有真正启用
• 当确认密码不符合startsWith检查时，输入框也会清空，错误提示只闪一下就消失了

我怀疑是父组件在状态变化时重新渲染导致的？或者我的判断有误？

我对React和NextJS不太熟悉，希望能得到大家的帮助，谢谢！

备注：内容来源于stack exchange，提问作者Kris Rice