表单自动填充时为什么 input 值变了但 React 状态没更新？

我在用 React 做登录页，用户保存过账号密码后，浏览器自动填充用户名和密码，但发现 state 里还是空的。比如我用 useState 控制的 email 字段，虽然输入框显示了自动填充的值，但提交时拿到的 state 却是初始值。

我试过加 onChange 监听，但自动填充好像不会触发这个事件。网上有人说要用 useRef 配合 useEffect 手动读取，但具体怎么写不太确定，有没有靠谱的解决方案？

const [email, setEmail] = useState('');
const emailRef = useRef(null);

useEffect(() => {
  const timer = setTimeout(() => {
    if (emailRef.current?.value && !email) {
      setEmail(emailRef.current.value);
    }
  }, 100);
  return () => clearTimeout(timer);
}, [email]);