Problem with input values in React (A component is changing a controlled input of type password to be uncontrolled.)

Question

I am trying to set up sign up page using React. I am passing values from state to "sign up" component through props. When I type password and try to submit it two things happen:

1. the predefined alert saying that password and confirmed password do not match pops up
2. the error saying "A component is changing a controlled input of type password to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component." occurs

ps I tried using Short-circuit evaluation (ex. value={this.state.fields.name || ''} ) but the input values keep refreshing to empty value. In my project I am using firebase.

class App extends Component {

  state = {signUpPage: {
              displayName: '',
              email: '',
              password: '',
              confirmPassword: ''
         }

  signUpHandleChange = (event) => {
    const {name, value} = event.target
    this.setState({
      signUpPage: {
        [name]: value
      }
    })
  }

  handleSubmitSignUp = async event => {
    event.preventDefault();
    const { displayName, email, password, confirmPassword} = this.state.signUpPage
    if (password !== confirmPassword) {
      alert("passwords do not match")
      return
    }

    try{
      const {user} = await auth.createUserWithEmailAndPassword(email, password);
      await createUserProfileDocument(user, {displayName});
      this.setState({
        signUpPage: {
          displayName: '',
          email: '',
          password: '',
          confirmPassword: ''
        }
      }) 
    } catch (error) { 
      console.error(error)
    }
  }


 render(){
    return (
      <BrowserRouter>
        <div>
          <SigningPage 
            signUpEmail={this.state.signUpPage.email} 
            signUpPassword={this.state.signUpPage.password}
            signUpConfirmPassword={this.state.signUpPage.confirmPassword}
            signUpValueChange={this.signUpHandleChange}
            signUpsubmit={this.handleSubmitSignUp}/>
        </div>
       </BrowserRouter>
    );
  } }

  //this is the SigningPage component
  const SigningPage = (props) => {
  return <article className={`${classes.signingpageitems} ${classes.signuppage}`}>
                        <h1 >Sign up</h1>
                        <form onSubmit={props.signUpsubmit}>
                            <input 
                                name="email" 
                                type="email" 
                                value={props.signUpEmail} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="email"
                                required>
                            </input>
                            <input 
                                name="password" 
                                type="password" 
                                value={props.signUpPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="password"
                                required>
                            </input>
                            <input 
                                name="confirmPassword" 
                                type="password" 
                                value={props.signUpConfirmPassword} 
                                className={classes.signingpageitem} 
                                onChange={props.signUpValueChange}
                                placeholder="confirm password"
                                required>
                            </input>
                            <input type="submit" value="Submit form" className={`${classes.signingpageitem} ${classes.signbtn}`}>

                            </input>
                        </form>
                    </article>
}

Answer 1

I solved the issue. The "name" atrribute did not match "value" attribute in the inputs.