how to impl a nested dynamic form ?

[Dlutermade]

Below is my schema definition

I can via mode change my display content, but I can't via recurringType

import {
  pipe,
  minValue,
  maxValue,
  object,
  literal,
  number,
  string,
  minLength,
  isoDateTime,
  custom,
  type InferOutput,
  variant,
  array,
  isoTimeSecond,
} from 'valibot'

// Once mode schema: just need a datetime
const onceFormSchema = pipe(
  object({
    mode: literal('once'),
    datetime: pipe(
      string(),
      minLength(1, 'Datetime is required'),
      isoDateTime('Invalid datetime format'),
      custom<string>((value) => {
        const currentDate = new Date()
        const selectedDateTime = new Date(value as string)
        if (selectedDateTime <= currentDate) {
          return false
        }
        return true
      }, 'Datetime must be after current time'),
    ),
  }),
)

// Recurring mode schema: need recurring type, time, and corresponding date fields
const recurringBaseFields = {
  mode: literal('recurring'),
  time: pipe(
    array(pipe(string(), isoTimeSecond('Invalid time format'))),
    minLength(1, 'At least one time is required'),
  ),
}
const recurringWeeklyFormSchema = object({
  ...recurringBaseFields,
  recurringType: literal('weekly'),
  daysOfWeek: pipe(
    array(
      pipe(
        number(),
        minValue(0, 'Please select at least one day of week'),
        maxValue(6, 'Please select at least one day of week'),
      ),
    ),
    minLength(1, 'Please select at least one day of week'),
  ),
})

const recurringMonthlyFormSchema = object({
  ...recurringBaseFields,
  recurringType: literal('monthly'),
  daysOfMonth: pipe(
    array(
      pipe(
        number(),
        minValue(1, 'Please select at least one day of month'),
        maxValue(31, 'Please select at least one day of month'),
      ),
    ),
    minLength(1, 'Please select at least one day of month'),
  ),
})

const recurringYearlyFormSchema = object({
  ...recurringBaseFields,
  recurringType: literal('yearly'),
  yearlyMonths: pipe(
    array(
      pipe(
        number(),
        minValue(1, 'Please select at least one month'),
        maxValue(12, 'Please select at least one month'),
      ),
    ),
    minLength(1, 'Please select at least one month'),
  ),
  yearlyDays: pipe(
    array(
      pipe(
        number(),
        minValue(1, 'Please select at least one day'),
        maxValue(31, 'Please select at least one day'),
      ),
    ),
    minLength(1, 'Please select at least one day'),
  ),
})

const recurringFormSchema = variant('recurringType', [
  recurringWeeklyFormSchema,
  recurringMonthlyFormSchema,
  recurringYearlyFormSchema,
])

// Discriminated union based on mode
const dynamicFormSchema = variant('mode', [onceFormSchema, recurringFormSchema])

type DynamicFormType = InferOutput<typeof dynamicFormSchema>

const defaultValues: DynamicFormType = {
  mode: 'once',
  datetime: new Date(
    new Date().getTime() -
      new Date().getTimezoneOffset() * 60 * 1000 +
      30 * 60 * 1000,
  )
    .toISOString()
    .slice(0, 16),
}

const dynamicFormOpts = formOptions({
  defaultValues: defaultValues as DynamicFormType,
})

export type { DynamicFormType }
export { dynamicFormSchema, dynamicFormOpts }

Below is my type

type DynamicFormType = {
    mode: "once";
    datetime: string;
} | {
    recurringType: "weekly";
    daysOfWeek: number[];
    mode: "recurring";
    time: string[];
} | {
    recurringType: "monthly";
    daysOfMonth: number[];
    mode: "recurring";
    time: string[];
} | {
    recurringType: "yearly";
    yearlyMonths: number[];
    yearlyDays: number[];
    mode: "recurring";
    time: string[];
}

[Dlutermade]

I used to define the type in the same way when using antd.