title: How can I change step from child component?
body: <p>I would like to display different components in a stepper, without use classic previous/next buttons.</p>
  
  <p>I started to use classic material UI stepper as an example, but now I'm wondering how can I manage to add a button in my PlanSelection component to lead to next step?</p>
  
  <pre><code>function getSteps() {
    return ['Plan', 'Date', 'Informations', 'Payment'];
  }
  
  
  function getStepContent(step) {
    switch (step) {
      case 0:
        return &lt;PlanSelection /&gt;;
      case 1:
        return &lt;DateSelection /&gt;;
      case 2:
        return &lt;InformationsCustomer /&gt;;
      case 3:
        return &lt;SummaryPayment /&gt;;
      default:
        return 'Unknown step';
    }
  }
  
  export default function CustomizedSteppers() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const steps = getSteps();
  
    const handleNext = () =&gt; {
      setActiveStep(prevActiveStep =&gt; prevActiveStep + 1);
    };
  
    const handleBack = () =&gt; {
      setActiveStep(prevActiveStep =&gt; prevActiveStep - 1);
    };
  
  
    return (
      &lt;Grid className={classes.root}&gt;
        &lt;Stepper alternativeLabel activeStep={activeStep} connector={&lt;ColorlibConnector /&gt;}&gt;
          {steps.map(label =&gt; (
            &lt;Step key={label}&gt;
              &lt;StepLabel StepIconComponent={ColorlibStepIcon}&gt;
                {label}
              &lt;/StepLabel&gt;
            &lt;/Step&gt;
          ))}
        &lt;/Stepper&gt;
  
  
       &lt;Grid&gt;{getStepContent(activeStep)}&lt;/Grid&gt;
  
      &lt;/Grid&gt;
    );
  }
  </code></pre>