App.js

import React,{useState} from 'react'
import UserFormDetails from './Component/UserFormDetails';

function App() {
  return (
    <div className="App">
      <UserFormDetails/>
    </div>
  );
}
export default App;

UserFormDetails.jsx

import React,{useState,useEffect} from 'react'
import BasicsDetails from './BasicsDetails';
import EducationalDetails from './EducationalDetails';
import Success from './Success';
import Confirm from './Confirm';
import Home from './Home';
function UserFormDetails() {
   const [inputDetails,setInputDetails] = useState({
        fName:'',lName:'',eMail:'',mbNo:'',qualUG:'',SpecUG:'',YOPUG:''
      })
     // const [step,setStep] = useState(5);
     const [step,setStep]= useState(0)
     
      const nextStep=()=>{
        setStep(step+1);
      }
      const prevStep = ()=>{
        if(step>=1){
            setStep(step-1)
        }
      }
      switch(step){
        case 1:
            return (<>
            <BasicsDetails nextStep={nextStep} prevStep={prevStep} inputDetails={inputDetails} setInputDetails={setInputDetails}/>
            </>)
        case 2:
            return (<>
            <EducationalDetails nextStep={nextStep} prevStep={prevStep} inputDetails={inputDetails} setInputDetails={setInputDetails}/>
            </>)
        case 3:
            return (<>
            <Confirm nextStep={nextStep} prevStep={prevStep} inputDetails={inputDetails}/>
            </>)
        case 4:
            return (<>
            <Success nextStep={nextStep} prevStep={prevStep} inputDetails={inputDetails}/>
            </>)
        default:
            return (<>
            <Home nextStep={nextStep} prevStep={prevStep} inputDetails={inputDetails}/>
            </>)   
      }
  
}

export default UserFormDetails

BasicsDetails.jsx

import React from ‘react’

function BasicsDetails({nextStep,prevStep,inputDetails,setInputDetails}) {
    
  return (
    <div className="clsBasicsDetails">
        <div>
        <label htmlFor='fName'>First Name:</label>
        <input name='fName' value={inputDetails.fName} onChange={(e)=>setInputDetails(e)}/>
        </div>
        <div>
        <label htmlFor='lName'>Last Name:</label>
        <input name='lName' value={inputDetails.lName} onChange={(e)=>setInputDetails(e)}/>
        </div>
        <div>
        <label htmlFor='eMail'>Email ID:</label>
        <input name='eMail' value={inputDetails.eMail} onChange={(e)=>setInputDetails(e)}/>
        </div>
        <div>
        <label htmlFor='mbNo'>Mobile Number:</label>
        <input name='mbNo' value={inputDetails.mbNo} onChange={(e)=>setInputDetails(e)}/>
        </div>
        <div>
            <button onClick={nextStep()}>Next Step</button>
            <button onClick={prevStep()}>Home Page</button>
        </div>
      
    </div>
  )
}

export default BasicsDetails

I have two doubts

1. When useState(0) in userFormDetails.jsx in setting step then it calling infinite number of times by switching between Home page and BasicsDetails.jsx automically and finally gives error stack error

2. But when useState(5) then it open the Home page and in console gives warning
   Warning: Cannot update a component (UserFormDetails) while rendering a different component (Home). To locate the bad setState() call inside Home, follow the stack trace as described

and I change something let say change button text of Home page to Proceed from Register and then refresh the page is continously loading the page and could not refresh