Does tanstack form work well with discriminated unions?

[virtuallyunknown]

Greetings.

I would like to ask, does Tanstack Form handle advanced form requirements such as having data which is a discriminated union. For example:

import { z } from 'zod';

const colors = ['red', 'green', 'blue'] as const;

export const catSchema = z.object({
  type: z.literal("cat"),
  meow: z.string().min(1, "Meow sound is required")
});

export const dogSchema = z.object({
  type: z.literal("dog"),
  bark: z.string().min(1, "Bark sound is required")
});

export const birdSchema = z.object({
  type: z.literal("bird"),
  chirp: z.string().min(1, "Chirp sound is required"),
  colors: z.array(z.enum(colors))
});

export const animalSchema = z.discriminatedUnion("type", [
  catSchema,
  dogSchema,
  birdSchema,
]);

export type AnimalSchema = z.infer<typeof animalSchema>;
export type AnimalType = AnimalSchema["type"];
export type BirdColors = z.infer<typeof birdSchema>['colors'][number];
export const BIRD_COLORS = colors;

I need to express this relation in a dynamic form, where the animal type is a select element which changes the form type, and different fields are rendered depending on the selected animal. If a dog is selected, we need <input type="text" name="bark" />, if a bird is selected, we need <input type="text" name="bark" /> and checkboxes that add/remove colors from the colors array.

I've been trying to do this with RHF for the last 2 days and I've encountered all sorts of issues. You can see what I am trying to build in this codesandbox. This particular example works, but there have been more issues I've discovered since, in particular about watch and useWatch having straight out incorrect type definitions provided by the library itself.

So, the question is whether or not Tanstack form is better suited for this task. Researching about this online yielded surprisingly few results, and there aren't any examples in the docs that cover this particular use case.

Cheers!