How to use React stepper without using Redux?

I have 3 components that will basically take input from the users and will show a progress bar. (Components list)

1. Name, Email.
2. Bank Details.
3. Address.

I am using react material-UI stepper. Every component has a different API to create the details, while clicking on the Next button it will go on create. I am not allowed to use React-Redux, only React Context.

here is the Progressbar.js

     function getSteps() {
      return [
        'About your App!',
        'First User Type',
        'First Screen',
        'First Info Type',
        'First Sub Info Type'
      ];
    }
    
    
    function getStepContent(stepIndex, action, values) {
      debugger;
    
      switch (stepIndex) {
        case 0:
          return <FormAppDetails handleChange={action} values={values} />;
        case 1:
          return <UserTypeCreationForm  handleChange={action} values={values}/>;
        case 2:
          return <ScreenCreationForm handleChange={action} values={values} />;
          case 3:
          return <InfoTypeCreationForm handleChange={action} values={values} />;
          case 4:
          return <SubInfoTypeCreationForm handleChange={action} values={values} />;
        default:
          return 'Unknown stepIndex';
      }
    }
function CreateForm({
  handleChange,
  nextStep,
  hasApp,
  keyId,
  parentId,
  app,
  selected,
  refetchQueries,
  onSelect,
  customerId,
  createApp,

}){
  const classes = useStyles();
  const [activeStep, setActiveStep] = useState(0);
  const steps = getSteps();


  const values = {
    handleChange,
    nextStep,
    hasApp,
    keyId,
    parentId,
    app,
    selected,
    refetchQueries,
    onSelect,
  };
  console.log('insideee values', values);

  const handleNext = () => {
    setActiveStep((prevActiveStep) => prevActiveStep + 1);
  };

  const handleBack = () => {
    setActiveStep((prevActiveStep) => prevActiveStep - 1);
  };

  const handleReset = () => {
    setActiveStep(0);
  };
  debugger;

  return (
    <div className={classes.root}>
      <Container maxWidth="sm" >
      <Stepper 
      activeStep={activeStep} 
      alternativeLabel 
      className={classes.customStepper}
      connector={<CustomColorLib />}

      
      >
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel
            StepIconProps={{
              classes: { root: classes.customeTheme }
            }}
          >
            
            {label}</StepLabel>
          </Step>
        ))}
      </Stepper>
      <div>
        {activeStep === steps.length ? (
          <div>
            <Typography className={classes.instructions}>All steps completed</Typography>
            <Button onClick={handleReset}>Reset</Button>
          </div>
        ) : (
          <div>
            <Typography className={classes.instructions}>{getStepContent(activeStep,handleChange,values) }</Typography>
            <div className={classes.buttonWrapper}>
           
            
              <Button 
              variant="contained" 
              onClick={handleNext} 
              className={classes.customButton} 
              
              >
                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
              </Button>
            </div>
          </div>
        )}
      </div>

      </Container>
      
    </div>

  );

}