Progressive enhancement is great and fast to display the error messages for invalid input fields. I followed the new nextjs.org/learn guide and built the dashboard. Now I am playing around. As for this part:

  const initialState = { message: null, errors: {} };
  const [state, dispatch] = useFormState(createInvoice, initialState);

// ...

{state.errors?.customerId ? (
  <div
    id="customer-error"
    aria-live="polite"
    className="mt-2 text-sm text-red-500"
  >
    {state.errors.customerId.map((error: string) => (
      <p key={error}>{error}</p>
    ))}
  </div>
) : null}

The error messages persists whenever a user focuses the related input, but I'd like to hide the error as the user updates the input. So I am curious if the best solution is to wrap everything in an additional useState and use a bunch of useEffects to toggle everything on and off. I fear I might be over complicating things here...