How to use a checkbox/switch element with useZorm?

[yamilelias]

We have a form that uses an on/off switch as part of the form. However, the form never seems to trigger the onValidSubmit function whenever I try to add it. It doesn't matter the switch state. This is my form:

formSchema.ts

export const formSchema = z.object({
    token: z.string(),
    identity: z.string(),
    isAgentAutomatic: z.boolean(),
  })

ScreenForm.tsx

const Screen = () => {
    // We are using tRPC for the API
    const { data: APICredentials } = api.automate.get.useQuery()

    const {
        ref,
        errors,
        validate,
        fields,
      } = useZorm('my-form', formSchema, {
        // This never triggers
        onValidSubmit: (
          event: ValidSubmitEvent<{
            token: string
            identity: string
            isAgentAutomatic: boolean
          }>,
        ) => {
          event.preventDefault()
          submitForm(event.data)
        },
      })

    return (
        <form ref={ref} onChange={validate}>
            <Input
                label="API Key"
                className="mb-4 w-full bg-transparent focus:outline-none"
                containerClasses="col-span-2 sm:col-span-1"
                required
                defaultValue={APICredentials?.token}
                value={token}
                onChange={e => setCredentials({ ...credentials, token: e.target.value })}
                name={fields.token()}
                error={errors.token()?.message}
              />
            <Switch
                defaultChecked={APICredentials?.isAgentAutomatic}
                name={fields.isAgentAutomatic()}
            />
            <TextArea
                placeholder="Identity Description"
                defaultValue={APICredentials?.identity}
                name={fields.identity()}
                error={errors.identity()?.message}
                containerClasses={'py-1 md:py-2 md:mb-2 md:p-0 h-full'}
                />
        </form>
    )
}

Switch.tsx

export const Switch = ({ label = '', switchSize = 'md', title, ...props }: ISwitch) => {
  return (
    <label className="relative inline-flex cursor-pointer items-center">
      <input data-testid="switch" type="checkbox" className="peer sr-only" {...props} />
      <div
        title={title}
        data-testid="container-switch"
        className={`peer rounded-full bg-gray-200 peer-hover:bg-secondary-dark dark:bg-secondary ${
          switchSize === 'md' ? 'h-5 w-9 after:h-4 after:w-4' : 'h-6 w-11 after:h-5 after:w-5'
        } bg-secondary after:absolute after:left-0.5 after:top-0.5 after:rounded-full 
        after:border after:border-gray-300 after:bg-white 
        after:transition-all after:content-[''] peer-checked:bg-primary-dark peer-checked:after:translate-x-[97%]
        peer-checked:after:border-white 
        peer-focus:outline-none peer-disabled:cursor-not-allowed 
        peer-disabled:peer-checked:bg-tertiary-dark peer-disabled:peer-hover:bg-tertiary-dark dark:after:border-none
         dark:after:bg-tertiary dark:peer-checked:bg-darkSuccess`}
      />
      <span className="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">{label}</span>
    </label>
  )
}

I have no issues with other types of inputs, just with this one. However, the documentation is not clear enough for me to understand what is going on with the switch input type. I'm sending all the props to the checkbox input type. This is bugging me because I need to add it to the form, but the only solution I've found is to control the inputs using a state. However, this goes against Zorm's mission.

If anyone has a clue that could guide me, I'd really appreciate it. Also, if someone else gets into the same situation, I'm willing to open a PR to update the docs to include this.