我正在将formik与材质ui/stepper一起使用，并且我在显示选中的formik状态值为true的复选框时遇到问题。
在我的表单中，我使用的是MaterialUI步进器。我面临的问题是，在表单的第1页上，我使用了一个复选框（formcontrollabel api）。当我点击复选框时，该复选框的formik状态值为真，但当我进入下一页，然后按下后退按钮返回到第1页，复选框所在的位置时，formik状态值仍保持真值，但我的复选框不再被选中。
下面是我用来呈现复选框的代码，但我不确定为什么复选框没有显示为选中的真值？
我添加了代码 checked={field.checked} 在 FormControlLabel 但没有什么区别。

import React from 'react';
import {
  Checkbox,
  FormControl,
  FormControlLabel,
  FormGroup,
  FormLabel
} from '@material-ui/core';
import { useField, useFormikContext } from 'formik';

const CheckboxWrapper = ({
  name,
  label,
  legend,
  ...otherProps
}) => {
  const { setFieldValue } = useFormikContext();
  const [field, meta] = useField(name);

  const handleChange = evt => {
    const { checked } = evt.target;
    setFieldValue(name, checked);
  };

  const configCheckbox = {
    ...field,
    onChange: handleChange
  };

  const configFormControl = {};
  if (meta && meta.touched && meta.error) {
    configFormControl.error = true;
  }

  return (
    <FormControl {...configFormControl}>
      <FormLabel component="legend">{legend}</FormLabel>
      <FormGroup>
        <FormControlLabel
          control={<Checkbox {...configCheckbox} />}
          label={label}
          checked={field.checked}
        />
      </FormGroup>
    </FormControl>
  );
};

export default CheckboxWrapper;

我在实际表格中调用上述内容的方式如下：

<Checkbox 
        name="termsAgreement"
        label="I agree"
      />

哪里 name="termsAgreement" 是我的formik初始状态值。
任何帮助都会很好。