How to change the numbers in steps of material ui stepper

I asked the question: https://stackoverflow.com/q/51492162/5946125

Steps takes the numbers which are length of the steps state array ex:

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

Later this state may change to :

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

Or

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

and so on… This is the code for stepper.

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

But in all the cases my steps show only 1,2,3,4,. I need to change those numbers according to the steps’ state array.

If I change initial state of steps to [1,2,5,6] (some random) also, step buttons are still 1,2,3,4. Why don’t they change? Or how to change?

If I use StepLabel component it looks like and code for this:

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

But I don’t want label. I want those labels should be on step buttons.

[mbrookes]

Use the icon attribute of StepLabel.

[mbrookes]

@JustinStoddard

For example icon={3} or icon="A"

Line 63 in demo.tsx:

https://codesandbox.io/s/material-demo-6mdwm