Generic typescript wrapper around input

[jezikk]

Hi,

I need help. Is it possible to create a dynamic wrapper around some input component with typescript support? I can't figure out how to correctly define types to support name suggestions of the given form.

import { type FieldName, type FormId, useField } from "@conform-to/react";
import { TextField, type TextFieldProps } from "../ui/text-field";

export type TextFieldFormProps<
  TFieldSchema,
  TFormSchema extends Record<string, unknown>,
> = TextFieldProps & {
  name: FieldName<TFieldSchema, TFormSchema>;
  formId: FormId<TFormSchema>;
};

export function TextFieldForm<
  TFieldSchema,
  TFormSchema extends Record<string, unknown>,
>({ name, formId, ...props }: TextFieldFormProps<TFieldSchema, TFormSchema>) {
  const [field] = useField(name, { formId });

  return (
    <TextField
      {...props}
      name={field.name}
      defaultValue={field.defaultValue}
      isInvalid={!field.valid}
      errorMessage={field.errors?.join(",")}
    />
  );
}