Im using Material UI's Stepper component and trying to get the fill of a stepper that is in its error state to be red.

For reference, here is the Stepper component in Material UI's docs.

So im trying to show an error state. Material UI's has an error prop that will show the error state, however, I dont want the icon provided.

I just want it to be like any other stepper, just with a red background.

Is there any way I can get rid of that icon, and just show a red fill?

Been search all over but seems like no one really asked about this.

Here is my code:

<Stepper alternativeLabel activeStep={this.determineFormStep()} connector={<StepConnector />} className={classes.stepper}>
          {formLabels.map((label) => {
            return (
              <Step key={label}>
                <StepLabel
                  error
                  StepIconProps={{
                    classes: {
                      root: classes.step,
                      completed: classes.completed,
                      active: classes.active,
                      error: classes.error,
                      disabled: classes.disabled
                    }
                  }}>
                  <div className={classes.stepLabelRoot}>
                    <Typography className={classes.label}>
                      {label.label}
                    </Typography>
                    <span className={classes.sublabel}>
                      {label.sublabel1}
                    </span>
                    <span className={classes.sublabel}>
                      {label.sublabel2}
                    </span>
                    <span className={classes.sublabel}>
                      {label.sublabel3}
                    </span>
                  </div>
                </StepLabel>
              </Step>);
          })}
        </Stepper>