Is it correct that useFieldArray does not support nullable arrays?

[jfulse]

Example type and default values:

type Values = { listField: { a: string }[] | null };
const defaultValues: DefaultValues<Values> = { listField: null };

When trying to use this with useFieldArray, the value in the form state immediately becomes an empty array. This leads to the form being marked as dirty, which is not good for our use case.

Question: Is there a way to handle nullable arrays without the form spuriously being marked as dirty, or do we have to make sure our model does not include nullable arrays?

I haven't been able to find much about this in docs etc, the clearest answer I've seen is in this discussion.

Below is a full reproduction, where we see that values.listField and defaultValues.listField are immediately different. If we remove the line with useFieldArray they are both null.

import { DefaultValues, useFieldArray, useForm } from "react-hook-form";

type Values = { listField: { a: string }[] | null };
const defaultValues: DefaultValues<Values> = { listField: null };

export default function Test() {
  const form = useForm<Values>({ defaultValues });
  useFieldArray({ control: form.control, name: "listField" });

  console.log("defaultValues:", form.formState.defaultValues);
  console.log("values:", form.getValues());

  return (<div><h1>Test</h1></div>);
}