React js with Zod validation superRefine not updated realtime with values changes

for this code every thing is fine but I want when the user start with the end date and then the error show "select start date first" after that return back to start date and select start date error of "select start date first" is still shown why is that and how to solve it

const formSchema = z
  .object({
    game: z.string().min(1, { message: "you must select at least one game" }),
    tournamentName: z
      .string()
      .min(2, "Tournament Name must be at least 2 characters."),

    platform: z.enum(["mobile", "pc", "xbox"]),
    description: z.string(),
    rules: z.string(),
    coverImage: z.any(),
    profileImage: z.any(),
    startDate: z
      .date()
      .refine(
        (date) => date instanceof Date && !isNaN(date) && date > new Date(),
        {
          message: "Start Date must be a valid date and in the future.",
        }
      ),
    endDate: z.date().refine((date) => date instanceof Date && !isNaN(date), {
      message: "End Date is required.",
    }),
  })
  .superRefine((data, ctx) => {
    const { startDate, endDate } = data;
    console.log(data);
    if (!startDate && endDate) {
      ctx.addIssue({
        path: ["endDate"],
        message: "select start date first",
      });
    }
    if (startDate > endDate) {
      ctx.addIssue({
        path: ["endDate"],
        message: "End Date must be after Start Date.",
      });
    }
  }); 

React js with Zod validation superRefine not updated realtime with values changes how can I get real time updating that when I update end date without start date set --> error "you must select start date" and if return to start date the error must not shown all things real time