Fluent UI Shimmer Issue

Question

I'm trying to use the 'swap' functionality from Fluent UI's shimmer component. It basically just applies a cross fade between the two components.

When swapping, my shimmer control seems to be expanding vertically, and adding another bar below the originally defined shimmer element. I have no idea why, would really love some help with this.

Shimmer:

Transition (extra shimmer bar is added)

Actual component:

Here's my main tsx file - hopefully this is helpful.

interface iProps {
  webAPI: ComponentFramework.WebApi,
  controlValue: ComponentFramework.LookupValue,
  recordID: string;
}
const wrapperClass = mergeStyles({
  padding: 2,
  selectors: {
    '& > .ms-Shimmer-container': {
      margin: '10px 0',
      width: '100%'
    },
  },
});
const shimmerWithElementFirstRow = [
  { type: ShimmerElementType.circle },
  { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.line, height: 5},
  { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.circle },
 { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.line, height: 5},
  { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.circle},
 { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.line, height: 5},
  { type: ShimmerElementType.gap, width: '2%' },
  { type: ShimmerElementType.circle },
];


const QontoConnector = styled(StepConnector)(({ theme }) => ({
  [`&.${stepConnectorClasses.alternativeLabel}`]: {
    top: 10,
    left: 'calc(-50% + 16px)',
    right: 'calc(50% + 16px)',
  },
  [`&.${stepConnectorClasses.active}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#1f4d25',
    },
  },
  [`&.${stepConnectorClasses.completed}`]: {
    [`& .${stepConnectorClasses.line}`]: {
      borderColor: '#1f4d25',
      transition: 'border-color .3s ease'
    },
  },
  [`& .${stepConnectorClasses.line}`]: {
    borderColor: '#eaeaf0',
    borderTopWidth: 3,
    borderRadius: 1,
    transition: 'border-color .3s ease'
  },
}));

const QontoStepIconRoot = styled('div')<{ ownerState: { active?: boolean } }>(
  ({ theme, ownerState }) => ({
    color: '#eaeaf0',
    display: 'flex',
    height: 22,
    alignItems: 'center',
    ...(ownerState.active && {
      color: '#1f4d25',
    }),
    '& .QontoStepIcon-completedIcon': {
      color: '#1f4d25',
      zIndex: 1,
      fontSize: 18,
    },
    '& .QontoStepIcon-circle': {
      width: 8,
      height: 8,
      borderRadius: '50%',
      backgroundColor: 'currentColor',
    },
  }),
);

function QontoStepIcon(props: StepIconProps) {
  const { active, completed, className } = props;

  return (
    <QontoStepIconRoot ownerState={{ active }} className={className}>
      {completed ? (
        <Check className="QontoStepIcon-completedIcon" />
      ) : (
        <div className="QontoStepIcon-circle" />
      )}
    </QontoStepIconRoot>
  );
}


export default function CustomizedSteppers({ webAPI, controlValue, recordID}: iProps) {
  console.log("Component rendered")
  let currentStep = 0
  const [activeStep, setActiveStep] = React.useState(currentStep);
  const [BPFSteps, setBPFSteps] = React.useState<BPFStep[]>([])

  
  //handler to init steps
  React.useMemo(() => {

    const initControlValues = async () => {
   
      const processSteps = new BPFProcesses(recordID, webAPI, controlValue);
      try {
          const result = await processSteps.getInitData();
          if (result.data?.BPFSteps) {
            setBPFSteps(result.data.BPFSteps);
            console.log("BPFSteps updated: " + result.data.BPFSteps)
          
          }
      } catch (error) {
          console.error("Error getting data:", error);

      }
    };

    // Call the function to initialize control values
    if (BPFSteps.length === 0) {
      initControlValues().catch(console.error);
      console.log("Steps initialized");
    }

  }, []);

  // Handler to set a new active step
  const handleStep = (step: number) => () => {
    setActiveStep(step);
    console.log("activeStep updated: " + step)
  };

  const steps = BPFSteps.length > 0 ? BPFSteps.map(step => step.name) : ["Undefined"];

  return (
    <div style={{ width: '100%', height: ' 55.5156px' }}>
      <Shimmer isDataLoaded={BPFSteps.length > 0 } width="100%" shimmerElements={shimmerWithElementFirstRow}>
        <Stepper  sx={{
          width: '100%',
        }}
        alternativeLabel activeStep={activeStep} connector={<QontoConnector />}>
          {steps.map((label, index) => (
            <Step key={label} onClick={handleStep(index)}>
              <StepLabel StepIconComponent={QontoStepIcon}>{label}</StepLabel>
            </Step>
          ))}
        </Stepper>
      </Shimmer>
    </div>
  );
 
}