如何将material ui stepper中的数字更改为字母表，如a，b，c，d

import React from 'react';
import { StepIconProps } from '@material-ui/core/StepIcon';

const CustomStepIcon: React.FC<StepIconProps> = (props) => {
  const { active, completed, icon } = props;

  // 自定义步骤图标样式
  const iconStyles: React.CSSProperties = {
    fontSize: 24,
    color: 'gray',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };

  // 自定义步骤图标
  let stepIcon;
  if (completed) {
    stepIcon = <CheckCircleIcon style={iconStyles} />;
  } else if (active) {
    stepIcon = <RadioButtonCheckedIcon style={iconStyles} />;
  } else {
    stepIcon = <RadioButtonUncheckedIcon style={iconStyles} />;
  }

  // 自定义步骤标签
  let stepLabel;
  switch (props.icon) {
    case 0:
      stepLabel = 'a';
      break;
    case 1:
      stepLabel = 'b';
      break;
    case 2:
      stepLabel = 'c';
      break;
    case 3:
      stepLabel = 'd';
      break;
    default:
      stepLabel = '';
  }

  return (
    <div>
      {stepIcon}
      <Typography variant="body2" color={active ? 'textPrimary' : 'textSecondary'}>
        {stepLabel}
      </Typography>
    </div>
  );
};

<Stepper alternativeLabel>
  <Step>
    <StepLabel StepIconComponent={CustomStepIcon} />
  </Step>
  <Step>
    <StepLabel StepIconComponent={CustomStepIcon} />
  </Step>
  <Step>
    <StepLabel StepIconComponent={CustomStepIcon} />
  </Step>
  <Step>
    <StepLabel StepIconComponent={CustomStepIcon} />
  </Step>
</Stepper>