我尝试在表单上创建图像上传。问题在于当我尝试将值更改为实际上传的文件时。我尝试使用 setFieldValue，但它说它未定义。以下是代码。知道它为什么未定义吗？我以为它来自 Formik。

import { Formik } from 'formik';


const AddProduct = (props) => {

  return (
    <Formik
      initialValues={{
        serviceImage: null
      }}
      
      onSubmit={(values) => {
        console.log(values);
        
      }}
    >
      {({
        errors,
        handleBlur,
        handleChange,
        handleSubmit,
        setFieldValue,
        isSubmitting,
        touched,
        values,
        formProps
      }) => (
        <form onSubmit={handleSubmit}>
          <TextField
            error={Boolean(touched.serviceName && errors.serviceName)}
            fullWidth
            helperText={touched.serviceName && errors.serviceName}
            label="Service name"
            margin="normal"
            name="serviceName"
            onBlur={handleBlur}
            onChange={handleChange}
            value={values.serviceName}
          />

          <Button>
            <input
              id="file"
              name="serviceImage"
              value={values.serviceImage}
              type="file"
              onChange={(event) => formProps.setFieldValue('serviceImage', event.target)
              }
            />
            Add an Image
          </Button>

            <Button
              type="submit"            >
              Post this service on the Events Platform
            </Button>
        </form>
        
      )}
    </Formik>
  );
};