【JavaScript】ログインフォームの違反表示が無くならない

Question

実現したいこと

入力を修正した際にログインフォームの違反表示を消したい

前提

メールアドレスとパスワードでログインするフォームを作っています。
メールアドレスとパスワードをバリデーションし、違反していたらメッセージを出すようにしたのですが、正しい入力にしても違反表示が消えません。
どなたかヒントをいただけないでしょうか。

考えたこと

違反表示がerrorsを参照したものであり、
バリデーション違反していない入力の際がcatchブロックに入らないのでsetErrorsが行われず、入力の前の状態のままになっていると思い、14行目の

FormData.parse(data);

の後にerrorsを更新する処理を入れるべきだと考えたのですが、どうすればいいか分かりません。

該当のソースコード

import { useState } from 'react';
import { z, ZodError } from 'zod';

function App() {
  const [data, setData] = useState({ email: '', password: '' });
  const [errors, setErrors] = useState(null);
  const FormData = z.object({
    email: z.string().email(),
    password: z.string().min(8).max(32),
  });
  const handleSubmit = (e) => {
    e.preventDefault();
    try {
      FormData.parse(data);
    } catch(e) {
      if (e instanceof ZodError) {
        setErrors(e.flatten().fieldErrors);
        console.log(errors);
      } else {
        console.log(e);
      }
    }
    console.log(errors);
    console.log(data);
  };
  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <div className="App">
      <h1>login</h1>
      <form onSubmit={ handleSubmit }>
        <div>
          <label htmlFor="email">Email</label>
          <input id="email" 
                 name="email" 
                 value={ data.email } 
                 onChange={ handleChange } />
        </div>
        { errors?.email && <div>{ errors.email }</div>}
        <div>
          <label htmlFor="password">Password</label>
          <input id="password" 
                 name="password" 
                 value={ data.password } 
                 onChange={ handleChange } 
                 type="password" />
        </div>
        { errors?.password && <div>{ errors.password }</div>}
        <div>
          <button type="submit">Login</button>
        </div>
      </form>
    </div>
  );
}