fix(Stepper): use slots API for custom step icons and fix alignment (MUI v9)

[Rajesh-Nagarajan-11]

Root Cause:

• Missing Icons: MUI v9 deprecated the StepIconComponent prop on StepLabel and replaced it with the slots/slotProps API. The old prop is silently ignored, causing the stepper to fall back to default numbered circles.
• Misalignment: For accessibility, MUI v9 changed the component to render as an <ol> element instead of a <div> Because of this, it no longer defaults to a full-width block-level element, causing the stepper to shrink and misalign to the left.

Fix:

• Replaced StepIconComponent with slots={{ stepIcon: ColorlibStepIcon }} and passed the icons array via slotProps.
• Added sx={{ flex: 1 }} to the so it naturally grows to fill the flexbox container, accounting for the <div> to <ol> DOM change and restoring proper centering.

Screenshots

Before	After

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request refactors the CustomizedStepper component to utilize the slots and slotProps API for StyledStepLabel and adds a flex style to the stepper container. A review comment suggests optimizing performance by moving the slots object outside the component and memoizing slotProps to avoid redundant re-renders caused by inline object creation within the mapping function.

[Sbragul26]

LGTM 👍

[rishiraj38]

LGTM !!!!!!

[banana-three-join]

LGTM!