Nested If inside of if else javascript

I'm creating a validation I have a text handler which is,

1. userName
2. password
3. passwordConfirm
4. EmailID
5. securityAnswer

state = {
    userDetails: {
        userName: '',
        password: '',
        passwordConfirm: '',
        EmailID: '',
        securityAnswer: ''

    }
}

on the submit I have a logic of if else that handles all my test scenarios

if (_.isEmpty(this.state.userDetails.userName) || _.isEmpty(this.state.userDetails.password) || _.isEmpty(this.state.userDetails.passwordConfirm) || _.isEmpty(this.state.userDetails.EmailID) || _.isEmpty(this.state.userDetails.securityAnswer)) {

    // first scenario
    if (this.state.userDetails.userName == '') {
        this.setState({
            ...this.state,
            userNameResult: `Please choose your Username!`,
        })
    }

    // second scenario 
    if (this.state.userDetails.password == '') {
        this.setState({
            ...this.state,
            userDetails: {
                ...this.state.userDetails,
                errorPassword: `Please enter your Password!`,
            }
        })
    }

    // third scenario 
    if (this.state.userDetails.password == '') {
        this.setState({
            ...this.state,
            userDetails: {
                ...this.state.userDetails,
                errorPassword: `Please enter your Password!`,
            }
        })
    }

   .... // fourth scenario  and so on


} else {

    console.log(Proceed)

}

the problem is the nested if, inside the first if is not reading the whole scenario's

do you have any idea's? sorry for the noob question.