Extracting form.Field logic and TypeScript issues

  <FormField
    Field={form.Field}
    name="email"
    label="Email"
    tabIndex={1}
    autoComplete="username"
  />

'use client'

import ErrorList from '@/components/error-list'
import { Flex, Text, TextField } from '@radix-ui/themes'
import { FieldComponent, Validator } from '@tanstack/react-form'
import { zodValidator } from '@tanstack/zod-form-adapter'

type Props = {
  Field: FieldComponent<string | number | undefined, Validator<unknown, unknown> | unknown>
  name: string
  label: string
  tabIndex?: number
  type?:
    | 'date'
    | 'datetime-local'
    | 'email'
    | 'hidden'
    | 'month'
    | 'number'
    | 'password'
    | 'search'
    | 'tel'
    | 'text'
    | 'time'
    | 'url'
    | 'week'
  validators?: unknown
}

export default function FormFiled({ Field, name, label, type, tabIndex, validators }: Props) {
  return (
    <Field
      name={name}
      validatorAdapter={zodValidator()}
      validators={validators}
      children={({ state, handleBlur, handleChange }) => (
        <Flex direction="column">
          <Text as="label" size="2" weight="medium" mb="2" htmlFor={name}>
            {label}
          </Text>
          <TextField.Root
            variant="classic"
            name={name}
            type={type}
            tabIndex={tabIndex}
            defaultValue={state.value}
            onBlur={handleBlur}
            onChange={(e) => handleChange(e.target.value)}
          />
          <ErrorList errors={state.meta.errors} />
        </Flex>
      )}
    />
  )
}