[Stepper] Unnecessary rerender with StepContent

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I'm trying to combine the Vertical Stepper Component with the components that I already had. Something weird happens that whenever I go to the next step, the component inside the <StepContent> render twice and it's not happening the first time the component is rendered.

Expected behavior 🤔

Better render performance with children elements inside the <StepContent>

Steps to reproduce 🕹

Codesanbox: https://codesandbox.io/s/verticallinearstepper-material-demo-forked-ossb3?file=/demo.js

Steps:

1. See render Test Component from the console on the first time the web app is loaded
   

2. Click Continue

3. See render Test Component from the console is called twice this time
   

Context 🔦

No response

Your environment 🌎

Start with the linked CodeSandbox at demo.js and reproduce the Vertical Stepper case by watching the Test Component console output on initial load and after clicking Continue. Trace the StepContent rendering path to identify why the child renders twice after advancing. Done means the reproduction no longer shows the unnecessary second render while preserving the step transition.