Validation in Stepper form not working on next click, React JS

Question

The form validation is not working, I used inputProps in the form but the validation is not working and when next button is clicked it moves ahead. Please help.

const User = (props) => {
  const { activeStep: lastActiveStep, userId} = props;
  const classes = useStyles();
  const [Type, setType] = useState(0);
  const [activeStep, setActiveStep] = useState(lastActiveStep || 0);
  console.log(activeStep + "last step user filled");
  const [RelationOptions, setRelationOptions] = useState(0);
 
  const [DetailsForm, setDetailsForm] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
   
    {}
  );

  const [validation, setValidation] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
   
    {}
  );

    
 


 function getSteps(){
  return [<b style={{color:'purple'}}>'Personal Details'</b>, 
  <b style={{color:'purple'}}>'Relation'</b>, 
  <b style={{color:'purple'}}>'Other Details'</b>]; 
 }

    const steps = getSteps();

    const inputProps = {
      pattern: "[a-z]"
    }
 
  function onTypeChangeChange(event) {
    // setAge(event.target.value);
    setType(event.target.value);
    let _RelationOptions = Options.find(options => options.value === event.target.value);
    setRelationOptions(_RelationOptions.relationships);
  }


  const handleDeatilsInput = evt => {
    const name = evt.target.name;
    const newValue = evt.target.value;
    setDetailsForm({ [name]: newValue });
  };



 


  const handleDetailsSubmit = evt => {
    evt.preventDefault();
    let data = { DetailsForm };
    props.Details(DetailsForm)
    console.log(data + "new user");
  //  console.log( props.onDetails(DetailsForm) + "gana bajao");
     setDetailsForm();
   setActiveStep((prevActiveStep)=> prevActiveStep + 1);

   
   
  }

  function getStepContent(step) {
    switch (step) {
      case 0: if ((!props.user.s_firstName)) {
        return (<div>
        <form id ="form-step0" className={classes.root} onSubmit={handleGuardianDetailsSubmit} Validate autoComplete="off">
         <Grid item xs={12} sm={6} md={6}>
         {/* <AccountCircle sx={{ color: 'action.active', mr: 1, my: 1}} /> */}
          <TextField
            id="outlined-basic"
            name="s_firstName"
            label="First Name"
            variant="outlined"
            inputProps={{pattern: "[a-zA-Z]"}}
            defaultValue={DetailsForm.s_firstName}
            onChange={handleDeatilsInput} 
            helperText="Only letters are required"
            required= {true}
            />
         
            </Grid>
            <Grid item xs={12} sm={6} md={6}>
          <TextField
            id="outlined-basic"
            name="s_lastName"
            label="Last Name"
            variant="outlined"
            defaultValue={DetailsForm.s_lastName}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle />
                </InputAdornment>
              ),
            }}
            onChange={handleDeatilsInput} 
            required/></Grid>
             <Grid item xs={12} sm={6} md={6}>
          <TextField
            id="outlined-number"
            label="Age"
            name="s_age"
            defaultValue={DetailsForm.s_age}
            InputProps={{
              startAdornment: (
                <InputAdornment position="start">
                  <AccountCircle />
                </InputAdornment>
              ),
            }}
            type="number"
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleDeatilsInput}
            variant="outlined"
            required
          /></Grid>
          <Grid item xs={12} sm={6} md={6}>
          <FormControl variant="outlined" className={classes.formControl} 
          sx={{ m: 1, minWidth: 250 }} required>
            <InputLabel id="demo-simple-select-outlined-label">Class</InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              value={DetailsForm.s_class}
              onChange={handleDeatilsInput}
              label="Class"
              name="s_class"
            >
              {studentClasses.map(c =>
                <MenuItem key={c.value} value={c.value}>{c.name}</MenuItem>
              )}
            </Select>
            {/* <Button variant="contained" type="submit" color="primary" >NEXT</Button> */}

          </FormControl></Grid>
        </form>
      </div> )}
;
      case 1: if (!props.user.g_relationship) {
        return ( <div>
        <form id="form-step1" className={classes.root} onSubmit={handleDetailsSubmit} noValidate autoComplete="off">
        <Grid item xs={12} sm={6} md={6}>
          <FormControl variant="outlined" className={classes.formControl}
          sx={{ m: 1, minWidth: 120 }} required>
            <InputLabel id="demo-simple-select-outlined-label">Relationship</InputLabel>
            <Select
              labelId="demo-simple-select-outlined-label"
              id="demo-simple-select-outlined"
              onChange={onTypeChangeChange}
              label="Relationship"
            >
              {Options.map(type =>
                <MenuItem key={type.value} value={type.value}>{type.name}</MenuItem>
              )}
            </Select>
          </FormControl>
</Grid>
<Grid item xs={12} sm={6} md={6}>
          {RelationOptions ?
        
            <FormControl variant="outlined" className={classes.formControl} 
            sx={{ m: 1, minWidth: 120 }} required>
              <InputLabel id="demo-simple-select-outlined-label">Relation</InputLabel>
              <Select
                labelId="demo-simple-select-outlined-label"
                id="demo-simple-select-outlined"
                // value={age}
                name="g_relationship"
                value={DetailsForm.g_relationship}
                onChange={handleDeatilsInput}
                label="Relation"
              >
                {RelationOptions.map(type =>
                  <MenuItem key={type.value} value={type.value}>{type.name}</MenuItem>
                )}
              </Select>
            </FormControl> : null

          }
       </Grid>

      
        </form>
      </div> )}
;
      case 2:
        return (  <div>
        <form id="form-step2" className={classes.root} onSubmit={handleDetailsSubmit} noValidate autoComplete="off">
        <Grid item xs={12} sm={6} md={6}>
          <TextField
            id="outlined-basic"
            name="g_firstName"
            label="First Name"
            variant="outlined"
            defaultValue={DetailsForm.g_firstName}
            onChange={handleDeatilsInput} 
            required/></Grid>
             <Grid item xs={12} sm={6} md={6}>
          <TextField
            id="outlined-basic"
            name="g_lastName"
            label="Last Name"
            variant="outlined"
            defaultValue={guardianForm.g_lastName}
            onChange={handleDeatilsInput} 
            required/></Grid>
             <Grid item xs={12} sm={6} md={6}>
          <TextField
            id="outlined-number"
            label="Age"
            name="g_age"
            defaultValue={DetailsForm.g_age}
            type="number"
            InputLabelProps={{
              shrink: true,
            }}
            onChange={handleDeatilsInput}
            variant="outlined"
            required
          /></Grid>
          
        </form>
      </div>)
;

      default:
        return 'welcome lets fill the progress.' ;
    }
  }    

  return (
  
    <div className={classes.root} align="center">

<div className = {classes.actionsContainer}>
<Paper square elevation={0}>

             
              <Typography>{getStepContent(activeStep)}</Typography>
              </Paper>
       
    
              <Box sx={{ width: '100%' }}>
      <Stepper activeStep={activeStep} alternativeLabel>
        {steps.map((label) => (
          <Step key={label}>
            <StepLabel>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>
    </Box>
<div>
<div>
<Button size="small"  onClick={handleDetailsSubmit} type="submit" 
        form={`form-step${activeStep}`}>
        {activeStep === steps.length-1? 'Finish' : 'Next'}
        </Button> 
</div>

                                                                                                                                                                                                                                              
     </div>
</div>
    </div>
  );
        }

      export default User;

Please help how to validate text field with each step validation. Its not working on next click. if every field is not filled still the form is submitted with empty value.