How to type the onChange correctly when extract the handler

[lei-zhao-infinitusai]

Hello, I am trying tanstack form now. One generic question I have is all the tutorial is have the inline onChange with just one line to update the field value.

But if we have complex customized logic when some value get changed, we do want to extract the onChange callback to a function instead of just doing it inline. But how can I give correct call back function typescript type when it need field?

eg, for this one

          <form.Field
            name="lastName"
            children={(field) => (
              <>
                <label htmlFor={field.name}>Last Name:</label>
                <input
                  id={field.name}
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => field.handleChange(e.target.value)}
                />
                <FieldInfo field={field} />
              </>
            )}
          />

I want to extract onChange function like this

const onChangeLastName = (e: React.ChangeEvent<HTMLInputElement>, field: ?) => {
// how can I give correct type of field?
field.handleChange(e.target.value)


// ... other customer logic
}

          <form.Field
            name="lastName"
            children={(field) => (
              <>
                <label htmlFor={field.name}>Last Name:</label>
                <input
                  id={field.name}
                  name={field.name}
                  value={field.state.value}
                  onBlur={field.handleBlur}
                  onChange={(e) => onChangeLastName(e, field)}
                />
                <FieldInfo field={field} />
              </>
            )}
          />

Thanks for your help!