Adding framer motion makes the StepSeparator loose its css

Question

When I use the motion.div to list the steps, the StepSeparator is displayed like an underline. Without the motion.div its displayed fine.

My code:

<Stepper orientation="horizontal">
  {steps.map((step, index) => (
    <Step key={index}>
      <motion.div
        key={index}
        initial={{ opacity: 0, x: -20 }}
        animate={{ opacity: 1, x: 0 }}
        transition={{ duration: 0.5, delay: index * 0.2 }}
      >

    <StepIndicator >
      {index < activeStep ? (
         <div className="step completed">
           <CheckIcon color="white" />
          </div>
          ) : (
            <StepNumber className={`step ${index === activeStep ? 'active' : ''}`}
            >
                {index + 1}</StepNumber>
          )}
    </StepIndicator>

         {index < steps.length - 1 && <StepSeparator />}
  
      </motion.div>
     </Step>
    ))}
  </Stepper>

---

Without motion.div:

---

With motion.div:

---

I inspected the before and after for the separator but cannot find anything different.

Please help.