redux form data is not preserved

Question

I have used redux-form for the form. I have developed a wizard considering an example from the documentation. The wizard is working but when i go to step 2 i.e SyncAccount component which has the form and fill that form and hit the next button to go to another step and hit the back button to go back to the SyncAccount component then the form is cleared. I have used destroyOnUnmount but it is not solving my issue either. What have i missed?

only second page i.e SyncAccount has only form. First and third do not have.

here is the code

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;