MUI5 Stepper unexpected vertical line when calling from function

Question

Hi I am trying to develop MUI5 vertical stepper but got issue when rendering steps from function. So, there is one extra connector line on top of first step.

https://codesandbox.io/s/customizedsteppers-material-demo-forked-vpgt8i?file=/demo.tsx

Answer 1

You need to call the component as a function.

const steps = ["Step1", "Step2", "Step3"];

const RenderTree = ({ label }) => (
  <Step>
    <StepLabel>{label}</StepLabel>
  </Step>
);

export default function CustomizedSteppers() {
  return (
    <Stepper orientation="vertical">
      {steps.map((label) => RenderTree({ label }))}
    </Stepper>
  );
}