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>