reactjs - Error de TypeScript al usar la función register de react-hook-form

Estoy tratando de registrar un elemento de un array usando react-hook-form con su hook useFieldArray y obtuve este error de TypeScript: Argument of type '`phases.${number}.name`' is not assignable to parameter of type '"_id" | "name" | "description" | "phases" | "isPrivate" | "createdBy" | "phases.0" | "phases.0.name" | "phases.0.description" | "phases.0.order"'. Básicamente, no puede reconocerlo porque el índice puede ser algo diferente de 0.

Aquí está el código:

interface IPhaseTemplate {
  _id: string;
  name: string;
  description: string;
  phases: [
    {
      name: string;
      description: string;
      order: number;
    }
  ];
  isPrivate: boolean;
  createdBy: string;
}
function CreateNew({ updateStep }: CreatePhaseTemplateProps) {
  const {
    register,
    handleSubmit,
    formState: { errors },
    control,
  } = useForm<IPhaseTemplate>({
    defaultValues: data ?? {
      name: "",
      description: "",
      isPrivate: false,
      phases: [
        {
          name: "",
          description: "",
          order: 0,
        },
      ],
    },
  });
  const { fields, append, remove } = useFieldArray({
    control,
    name: "phases",
  });
  return (
    <Box component="form" onSubmit={handleSubmit(onSubmit)}>
      <Stack spacing={1} alignItems="center">
        {fields.map((field, index) => (
          <Card sx={{ m: 1 }} key={field.id}>
            <CardContent>
              <TextField
                label="Name"
                fullWidth
                {...register(`phases.${index}.name` as const, {
                  required: "Name is required",
                })}
                error={!!errors.phases?.[index]?.name}
                helperText={errors.phases?.[index]?.name?.message}
                sx={{ mb: 1 }}
              />
              <TextField
                label="Description"
                fullWidth
                multiline
                rows={4}
                {...register(`phases.${index}.description` as const, {
                  required: "Description is required",
                })}
                error={!!errors.phases?.[index]?.description}
                helperText={errors.phases?.[index]?.description?.message}
              />
            </CardContent>
            <CardActions>
              <Button size="small" onClick={() => remove(index)}>
                Remove
              </Button>
            </CardActions>
          </Card>
        ))}
      </Stack>
    </Box>
  );
}

El error está en la parte phases.$ {index}.name` as const y también en la descripción.

He intentado seguir el ejemplo similar en https://react-hook-form.com/api/usefieldarray/#main usando el hook y usando as const para tipar la parte de register, pero TypeScript todavía me da errores

Respuesta #1

Intenta definir tu interfaz como se muestra a continuación:

interface IPhaseTemplate {
  _id: string;
  name: string;
  description: string;
  phases:{
      name: string;
      description: string;
      order: number;
    }[];
  isPrivate: boolean;
  createdBy: string;
}