TypeScript, TextInput, named function

[onosendi]

Below is Final Form's example:

type Props = FieldRenderProps<string, any>;

const TextInput: React.FC<Props> = ({ input, meta, ...rest }: Props) => (
  <input type="text" {...input} {...rest} />
);

export default TextInput;

How can this be achieved with a named function? I get this error on TextField in Fields render: Type '{ name: string; onBlur: (event?: FocusEvent<HTMLElement, Element> | undefined) => void; onChange: (event: any) => void; onFocus: (event?: FocusEvent<HTMLElement, Element> | undefined) => void; ... 5 more ...; label: string; }' is missing the following properties from type 'FieldRenderProps<string, any, string>': input, metats(2739)

type Props = FieldRenderProps<string, any>;

export default function TextField({ input, meta, ...rest }: Props) {
  return <input type="text" {...input} />;
}

<Field
  name="username"
  render={({ input }) => (
    <TextField {...input} /> // Error here
  )}
/>

[watofundefined]

<Field
  name="username"
  render={({ input }) => <TextField input={input} />}
/>

Or passing also meta:

<Field
  name="username"
  render={({ input, meta }) => <TextField input={input} meta={meta} />}
/>