Responsive Multi-step-form using Nextjs, React Hook Form, Zod

After providing the correct values, the error message does not disappear immediately.

Navigation.tsx

async function handleNextStep() {
  if (step === 1) {
    const result = await form.trigger(["name", "email", "phone"], {
      shouldFocus: true,
    });
    result && setStep(2);
  }

  if (step === 2) {
    const result = await form.trigger("plan", { shouldFocus: true });
    result && setStep(3);
  }

  if (step === 3) {
    const result = await form.trigger("addOns", { shouldFocus: true });
    result && setStep(4);
    const values = form.getValues();
    setValues(values);
  }
}