Formik form with custom material UI component not calling onChange function

Question

I have a formik field like below and I want to call an onChange function which is using the event.target.value. When I use materialUI's TextField component it works fine, but I use custom component the function doesn't get called.

<Field
name="jobId"
label="Job ID ID"
value={values.jobId}
onChange={e => customChange(event, setFieldValue)}
as={TextField} //does not work when I use TextFieldCustom instead
/>

Below is my code for the customer text field component

const TextFieldCustom = ({ label, disabled, ...props }) => {
    const classes = useStyles();
    const [field] = useField(props);  
    return (
        <TextField
            {...field}
            disabled={disabled}
            margin="dense"
            label={label}
            variant="outlined"
        />
    );
};

I am very sure I got the custom component wrong, but I don't know what do I need to add to make it work.

CodeSanbox Link

Answer 1

Use formik render props

     <Formik
    initialValues={{ name: "", jobId: "" }}
    onSubmit={(values, actions) => {
      console.log(values);
    }}
  >
    {({ values, setFieldValue, handleChange, handleSubmit }) => (
      <Form>
        <Field
          name="jobId"
          label="Job ID ID"
          value={values.jobId}
          render={({ field }) => {
            return (
              <TextFieldCustom
                {...field}
                onChange={event =>
                  setFieldValue(field.name, event.target.value)
                }
              />
            );
          }}
        />
      </Form>
    )}
  </Formik>