данные редукционной формы не сохраняются

Question

Я использовал редукс-форму для формы. Я разработал мастер, рассматривая пример из документации. Мастер работает, но когда я перехожу к шагу 2, то есть к компоненту SyncAccount, который имеет форму, заполняет эту форму, нажимает следующую кнопку, чтобы перейти к другому шагу, и нажимает кнопку назад, чтобы вернуться к компоненту SyncAccount, тогда форма очищается. Я использовал destroyOnUnmount, но это не решает мою проблему. Что я пропустил?

только вторая страница, т.е. SyncAccount имеет только форму. Первый и третий не имеют.

вот код

AccountSteps.js

const mapDispatchToProps = dispatch => ({
  getUser: () => dispatch(getCurrentUser()),
  postWizard: (userObj, wizardType) =>
    dispatch(postWizardData(userObj, wizardType)),
  updateWizard: (userObj, wizardType) =>
    dispatch(updateWizardData(userObj, wizardType)),
});

const mapStateToProps = state => ({
  userData: state.userReducer,
  wizard: state.wizardReducer,
});

class AccountSteps extends React.Component<{
  user: Object,
  wizard: Object,
  postWizard: Function,
  updateWizard: Function,
  getUser: Function
}> {
  constructor(props) {
    super(props);
    this.state = {
      page: 0,
      steps: [
        { steps: 0, label: 'Privacy' },
        { steps: 1, label: 'Sync Your Account' },
        { steps: 2, label: 'Install Extension' },
      ],
    };
  }

  componentDidMount() {
    this.props.getUser();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const { wizard } = nextProps;
    if (!isEmpty(wizard) && wizard.page !== prevState.page) {
      return {
        page: wizard.page,
      };
    }
    return null;
  }

  nextPage = (userObj, type) => {
    this.props.postWizard(userObj, type);
  };

  previousPage = (wizardData) => {
    console.log('wizardData', wizardData);
    this.props.updateWizard(wizardData);
  };

  render() {
    const { page, steps } = this.state;
    return (
      <Wrapper>
        <CardWrapper>
          <Stepper activeStep={page} alternativeLabel>
            {steps.map(step => (
              <Step key={step.steps}>
                <StepLabel>{step.label}</StepLabel>
              </Step>
            ))}
          </Stepper>
          {page === 0 && (
            <Privacy
              {...this.props}
              activeStep={page}
              back={this.previousPage}
              next={this.nextPage}
            />
          )}
          {page === 1 && (
            <SyncAccount
              {...this.props}
              activeStep={page}
              back={this.previousPage}
              next={this.nextPage}
            />
          )}
          {page === 2 && (
            <Extension
              {...this.props}
              activeStep={page}
              back={this.previousPage}
              next={this.nextPage}
            />
          )}
        </CardWrapper>
      </Wrapper>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(AccountSteps);

SyncAccount.js

const SyncAccount = ({
  user,
  emailProvider,
  handleProviderChange,
  handleChange,
  ...props
}: {
  user: Object,
  emailProvider: string,
  handleProviderChange: Function,
  handleChange: Function
}) => {
  console.log('props in Sync', user.email);
  return (
    <SyncWrapper>
      <IconsWrapper>
        <CustomSync style={{ fontSize: 30 }} color="action" />
        <Mail style={{ fontSize: 50 }} color="secondary" />
      </IconsWrapper>
      <p>Please enter your email address which you want to sync with us.</p>
      <FormWrapper>
        <span>Email Provider: </span>
        <RadioGroup
          aria-label="emailProvider"
          name="provider"
          style={{ display: 'flex', flexDirection: 'row' }}
          value={user.provider}
          onChange={handleChange}
        >
          <FormControlLabel
            value="google"
            control={<Radio color="primary" />}
            label="Google"
          />
          <FormControlLabel
            value="imap"
            control={<Radio color="primary" />}
            label="IMAP"
          />
        </RadioGroup>
        <StyledField
          label="Email"
          id="email"
          name="email"
          type="email"
          value={user.email}
          onChange={handleChange}
          placeholder="Email"
          component={GTextField}
          required
        />
        <StyledField
          label="Password"
          id="password"
          name="password"
          type="password"
          value={user.password}
          onChange={handleChange}
          placeholder="Password"
          component={GPasswordField}
          required
        />
        <StyledField
          label="Job title"
          id="jobTitle"
          name="job_title"
          value={user.job_title}
          onChange={handleChange}
          placeholder="Job Title"
          component={GAutoCompleteField}
          required
        />
        <Footer
          {...props}
          userObj={user}
          type="sync"
          wizardData={{ step_index: 0, wizard_name: 'privacy' }}
          disabled={user && (!user.email || !user.password || !user.job_title)}
        />
      </FormWrapper>
    </SyncWrapper>
  );
};

export default enhance(SyncAccount);


enhance.js

const requiredFields = {
  email: 'Email',
  password: 'Password',
  job_title: 'Job Title',
};

const withReduxForm = reduxForm({
  form: 'syncAccount',
  fields: requiredFields,
  destroyOnUnmount: false,
  forceUnregisterOnUnmount: true,
  validate,
});

const mapStateToProps = state => ({
  wizard: state.wizardReducer,
});

const enhance = compose(
  connect(
    mapStateToProps,
    null,
  ),
  withReduxForm,
  withState('user', 'updateUser', {
    email: '',
    password: '',
    job_title: '',
    provider: 'google',
    wizard_name: 'extension',
    step_index: 2,
  }),
  withHandlers({
    handleChange: props => (ev) => {
      if (ev.target) {
        return props.updateUser({
          ...props.user,
          [ev.target.name]: ev.target.value,
        });
      }
      return props.updateUser({
        ...props.user,
        job_title: ev.name,
      });
    },
  }),
);

export default enhance;