I have different form state types, defined like this:

export type EditProductFormState = {
  values?: z.infer<typeof editproductSchema>;
  errors:
    | {
        id?: string[];
        categoryId?: string[];
      }
    | undefined;
  success: boolean;
};
...
export type EditCategoryFormState = {
  values?: z.infer<typeof editCategorySchema>;
  errors:
    | {
        id?: string[];
        name?: string[];
        desc?: string[];
      }
    | undefined;
  success: boolean;
};

Now I'm trying to build an input component shared by many forms, all with their own form state types, and have each form pass its formState to this component, so that instead of this directly in the form:

data-invalid={!!formState.errors?.desc?.length
...
defaultValue={formState.values?.desc}

I'd like to do something like this in the component, which has a name prop receiving a value of desc:

const isInvalid = getErrors(formState, name)?.length;
const defaultValue = getValue(formState, name);

However, because each form state type is defined by a literal, I'm stuck on how to be make the component work with all form state types.