Проблема со степпером из React Material-UI

Question

Я пытаюсь разработать интерфейс для восстановления пароля с пользовательским интерфейсом Stepper из React Material

Внутри степпера есть некоторые входные данные от responsestrap, интерфейс работает, но когда я пытаюсь поместить некоторый текст в входы, а затем я нажимаю на следующую кнопку, чтобы сохранить процесс восстановления, тот же текст, который я написал ранее, все еще записывается на новый вход, даже когда я возвращаю другой ввод, когда я нажимаю на следующий, заполнитель и аддон отличается от первого ввода до второго, что означает, что ввод меняется

Я предполагал, что использование defaultValue="" установит значение нового ввода пустым и удалит текст, написанный ранее, но это не не работает

Вот код, который я использую:

function getStepContent(stepIndex, props) {
  if(stepIndex === 0){
      return (
        <>
        <Form role="form">
          <FormGroup className="mb-3">
              <InputGroup className="input-group-alternative">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="ni ni-email-83" />
                </InputGroupText>
              </InputGroupAddon>
              <Input placeholder="Email" type="email" onChange={e => props.onHandleChange('email', e.target.value)}/>
            </InputGroup>
          </FormGroup>
      </Form>
      </>
    );
  } else if(stepIndex === 1){
      return(
        <>
        <Form role="form">
          <FormGroup className="mb-3">
            <InputGroup className="input-group-alternative">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="ni ni-key-25" />
                </InputGroupText>
              </InputGroupAddon>
              <Input placeholder="Code" type="text" onChange={e => props.onHandleChange('code', e.target.value)}/>
            </InputGroup>
          </FormGroup>
      </Form>
      </>
      );
    } else {
      return(
        <>
        <Form role="form">
          <FormGroup className="mb-3">
            <InputGroup className="input-group-alternative">
              <InputGroupAddon addonType="prepend">
                <InputGroupText>
                  <i className="ni ni-lock-circle-open" />
                </InputGroupText>
              </InputGroupAddon>
              <Input placeholder="New Password" type="password" onChange={e => props.onHandleChange('newPass', e.target.value)}/>
            </InputGroup>
          </FormGroup>
      </Form>
      <Form role="form">
        <FormGroup className="mb-3">
          <InputGroup className="input-group-alternative">
            <InputGroupAddon addonType="prepend">
              <InputGroupText>
                <i className="ni ni-lock-circle-open" />
              </InputGroupText>
            </InputGroupAddon>
            <Input placeholder="Confirm new password" type="password" onChange={e => props.onHandleChange('confirmNewPassword', e.target.value)}/>
          </InputGroup>
        </FormGroup>
      </Form>
      </>
      );
    }
  }

export default function ForgotPasswordStepper(props) {
  const classes = useStyles();
  const [activeStep, setActiveStep] = React.useState(0);

  const steps = getSteps();

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  return (
    <>
    <Col lg="7" md="7">
      <Card className="bg-secondary shadow border-0">
        <CardBody className="px-lg-5 py-lg-5">
          <div className={classes.root}>
            <Stepper activeStep={activeStep} alternativeLabel>
              {steps.map((label) => (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                </Step>
              ))}
            </Stepper>
            <div>
              {activeStep === steps.length ? (
                <div>
                  <Typography className={classes.instructions}>New Password setted</Typography>
                  <Button href="/auth/loginas/">Finish</Button>
                </div>
              ) : (
                <div>
                  <Typography className={classes.instructions}>{getStepContent(activeStep, props)}</Typography>
                  <div>
                    <Button variant="contained" color="primary" onClick={handleNext}>
                      {activeStep === steps.length - 1 ? 'Confirm' : 'Next'}
                    </Button>
                  </div>
                </div>
              )}
            </div>
          </div>
        </CardBody>
      </Card>
    </Col>
    </>
  );
}

Вот пример, на первом шаге я пишу письмо

А здесь, на втором шаге, после того, как я нажал на кнопку, там все тот же текст, который я написал раньше

Я буду рад, если вы поможете мне * 1 019 *

Спасибо!