问使用Material的自动完成使用Formik在下拉列表中显示不同的值，但在formik状态下设置不同的值

EN

const gender = [
  { gender_name_short: "F", gender_name_long: "Female" },
  { gender_name_short: "M", gender_name_long: "Male" }
];
const validationSchema = object().shape({
  // genderObj: array().required("At least one gender is required")
});

const initialValues = {
  username: "abc",
  country: "",
  gender: "M",
  birthdate: null
};

const FormikAutocomplete = ({ textFieldProps, ...props }) => {
  const {
    form: { setTouched, setFieldValue }
  } = props;
  const { error, helperText, ...field } = fieldToTextField(props);
  const { name } = field;

  return (
    <Autocomplete
      {...field}
      {...props}
      onChange={(_, data) => {
        setFieldValue("gender", data.gender_name_short);
      }}
      onBlur={() => setTouched({ [name]: true })}
      // getOptionLabel={item => item.gender_name_long} //<----see here
      getOptionLabel={item => {
        // console.log( '====>' , typeof item === "string" ? props.options.find(i => i.gender_name_short === item).gender_name_long : item.gender_name_long)
        return typeof item === "string"
          ? props.options.find(i => i.gender_name_short === item)
              .gender_name_long
          : item.gender_name_long;
      }}
      // getOptionLabel={item => typeof item === 'string' ? props.options.find(i => i.gender_name_short === item).gender_name_long : item.gender_name_long}
      getOptionSelected={(item, current) => {
        return item.gender_name_short === current;
      }}
      // defaultValue={'hi'}
      renderInput={props => (
        <TextField
          {...props}
          {...textFieldProps}
          helperText={helperText}
          error={error}
        />
      )}
    />
  );
};

const SimpleFormExample = () => (
  <div>
    <h1>Simple Form Example</h1>
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validateOnBlur={false}
      validateOnChange
      onSubmit={(values, { resetForm, setSubmitting }) => {
        console.log(values);
        resetForm();
        // setSubmitting(false);
      }}
    >
      {formik => (
        <Form>
          <Field
            name="gender"
            component={FormikAutocomplete}
            label="gender"
            options={gender}
            textFieldProps={{
              fullWidth: true,
              margin: "normal",
              variant: "outlined"
            }}
            // multiple
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

export default SimpleFormExample;