alternativeLabel in Stepper component using material UI

Question

I'm learning Material UI. I am struggling with one problem. I am using Stepper component and for mobile devices I want add props alternativeLabel which will make the labels will be under the circle.

I got lost. Could someone show me how to achieve it ?

Thank you for any help ! ❤️

export default function ProgressBarStepper({ step }) {
  const classes = useStyles();

  const [activeStep, setActiveStep] = React.useState(step);
  const [skipped, setSkipped] = React.useState(new Set());

  const isStepSkipped = (step) => {
    return skipped.has(step);
  };

  // how to have alternativeLabel only for mobile ?? 
  //connector={false}
  return (
    <Box sx={{ width: "100%" }}>
      <Stepper activeStep={activeStep} connector={<QontoConnector />}  >
        {steps.map((label, index) => {
          const stepProps = {};
          const labelProps = {};
          if (isStepSkipped(index)) {
            stepProps.completed = false;
          }
          return (
            <Step
              sx={{
                "& .MuiStepLabel-root .Mui-completed": {
                  fontWeight: "700",
                },
              }}
              key={label}
              {...stepProps}
            >
              <StepLabel
  
                className={classes.boolspac}
                sx={{ fontWeight: "700", padding: "0" }}
                {...labelProps}
              >
                {label}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>
    </Box>
  );
}