Как изменить числа по шагам в Material-ui Stepper?

Эти шаги принимают числа, которые являются длиной массива шагов, т. Е.

    state = {
       steps: [0, 1, 2, 3]
    };

Позже это состояние может измениться на

    this.setState({
      steps: [1,2,3,4]
    });

Or

   this.setState({
     steps: [2,3,4,5]
   }); 

и так далее....

Но во всех случаях мои шаги показывают только 1,2,3,4 ,. Мне нужно изменить эти числа в соответствии с элементом массива шагов.

Это код для степпера.

<Stepper alternativeLabel nonLinear activeStep={activePage}>
     {steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(index)}
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}
  </Stepper>

Как этого добиться?

Если я использую компонент StepLabel, он выглядит как

Но мне не нужен ярлык. Я хочу, чтобы эти ярлыки были на кнопках шагов. Код для этого:

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>