Conditional rendering of a div based on state in react

Below is a authentication component that handles both registering and login of a user into an application. The approach used was to conditionally render a div based on whether a user had signed up in the application before or they are a new user. The div doesn’t change based on the initial state and based on the conditions set. In this case, the isSignUp state is false therefore the user hasn’t signed up before hence all the fields are supposed to be available for data input by the user but the fields have been ommited. Below is the code

const {isSignUp, setisSignUp} = useState(false);

<form onSubmit = {handleSubmit} className = 'form'>
                      {isSignUp && (
                          <div className='auth-form-field'>
                          <input
                          name="Full Name"
                          type="text"
                          placeholder="Full Name"
                          className =  "form-input"
                          onChange={handleChange}
                          required
                          />
                      </div>
                      )}  
                        
                       
                        <div className='auth-form-field'>
                            <input
                            name="Email"
                            type="text"
                            placeholder="Email"
                            className =  "form-input"
                            onChange={handleChange}
                            required
                            />
                        </div>
                        { isSignUp && (<div className='auth-form-field'>
                            <input
                            name="User Name"
                            type="text"
                            placeholder="User Name"
                            className =  "form-input"
                            onChange={handleChange}
                            required
                            />
                        </div>)
                  }
                        <div className = 'auth-form-field'>
                                <input
                                name="Password"
                                type="password"
                                placeholder="Password"
                                className =  "form-input"
                                onChange={handleChange}
                                required
                                />
                        </div> 
                        {isSignUp && (
                            <div className = 'auth-form-field'>
                                <input
                                name="Confirm Password"
                                type="password"
                                placeholder="Confirm Password"
                                className =  "form-input"
                                onChange={handleChange}
                                required
                                />
                        </div> )

                        }      
                </form>

>Solution :

Your syntax of useState is incorrect here

Correct syntax:

const [isSignUp, setisSignUp] = useState(false);