how to toggle hidden status of a form item based on the watched value of another form item

[ericlormul]

I tried using hidden attribute of FormItem or using tailwind hidden class. But, when the hidden status of my textarea changes as I change the radio group value, it pops an empty error like in the attached image. and nothing in the chrome console, just this nextjs error overlay. Thanks!

const FormSchema = z.object({
  type: z.enum(["other", "low quality", "harmful/unsafe", "irrelevant"], {
    required_error: "You need to choose a feedback type.",
  }),
  remark: z.string().optional(),
});

export function Feedback() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  });

  const typeValue = form.watch("type"); // Real-time values of the "type" field

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: "You submitted the following values:",
      description: (
        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    });
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
        {/* Feedback Type Field */}
        <FormField
          control={form.control}
          name="type"
          render={({ field }) => (
            <FormItem className="space-y-3">
              <FormControl>
                <RadioGroup
                  onValueChange={field.onChange}
                  defaultValue={field.value}
                  className="flex flex-col space-y-1"
                >
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="low quality" />
                    </FormControl>
                    <FormLabel className="font-normal">
                      low quanlity
                    </FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="harmful/unsafe" />
                    </FormControl>
                    <FormLabel className="font-normal">
                    harmful/unsafe
                    </FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="irrelevant" />
                    </FormControl>
                    <FormLabel className="font-normal">irrelevant</FormLabel>
                  </FormItem>
                  <FormItem className="flex items-center space-x-3 space-y-0">
                    <FormControl>
                      <RadioGroupItem value="other" />
                    </FormControl>
                    <FormLabel className="font-normal">other</FormLabel>
                  </FormItem>                  
                </RadioGroup>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {/* Remark Field */}
          <FormField
            control={form.control}
            name="remark"
            render={({ field }) => (
              <FormItem 
              // hidden={typeValue === "other"}
              >
                {/* <FormLabel htmlFor="remark">Give your</FormLabel> */}
                <FormControl>
                  <Textarea
                    id="remark" // Link the label to this textarea
                    placeholder="Write your feedback here"
                    className={cn(
                      "resize-none",
                      typeValue === "other" ? "" : "hidden"
                    )}
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

        <Button type="submit">Submit</Button>
      </form>
    </Form>
  );
}