ReactJS complex (if / else if) not working as expected

I have the following conditional

if (
    !user.userId
    && match.path === '/login'
) {
    component = <Login/>
} else if (
    user.userId
    && !user.OTPVerified
    && !user.loginWithPassword
    && match.path === '/verify'
) {
    component = <VerifyOTP/>
} else if (
    (user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword)
    && !user.profileCompleted
    && match.path === '/complete-profile'
) {
    console.log('userid', user.userId)
    console.log('otpverified', user.OTPVerified)
    console.log('loginWithPassword', user.loginWithPassword)
    console.log('profileCompleted', user.profileCompleted)
    console.log('path', match.path)
    component = <CompleteProfile/>
} else if (
    user.userId
    && !user.OTPVerified
    && user.loginWithPassword
    && user.profileCompleted
    && match.path === '/login-password'
) {
    component = <LoginWithPassword/>
} else {
    component = <Login/>
}

console returns

userid 29
otpverified true
loginWithPassword false
profileCompleted true
path /login

I dont get why am i still seeing CompleteProfile component