(React.js) developper toolで値の変更は確認できる　→　しかしブラウザで反応しない

今していること

画像のような登録画面にて、リアルタイムで条件を確認し、みたしているか判断するコードをreact.jsを使用して作っている

問題点

①stateのNumberOfPasswordがtrueになった時
=文字が8文字以上入力された時にリアルタイムで画像を切り替える

developper toolで確認する
→8文字以上入力すると、値がtrueになる
→しかし画像は切り替わらない

②文字を8文字以上入力 -> trueになる
しかしそこから文字を消してもtrueのままになっている

よろしくお願いいたします。
また https://codepen.io/mikepro4/full/pvKYZG/ のような挙動を目指しております。

コード

(() => {
    
function PasswordBallon(props){
  return (
      <div className="passwordBallon">
        <ul>
            <span>Password rules</span>
            <li>
                {(() => {
                  if(props.NumberOfPassword == true){  //**ここはreact developperではtrue8文字以上文字を打ち込むとtrueになっている
                    return <img src="../img/check-circle-regular.svg"/>
                　}else{
                    return <img src="../img/baseline-error_outline-24px.svg"/>
                　}
                })()}
                &nbsp;8 characters minimum
            </li>
            <li><img src="../img/baseline-error_outline-24px.svg"/> Contains at least 1 number</li>
            <li><img src="../img/baseline-error_outline-24px.svg"/> Cant be "password"</li>
            <li></li>
        </ul>
      </div>
  );
}

class App extends React.Component {
    
    constructor() {
      super();
      this.state = {
        display: false,
        fields: {},
        errors: {},
        NumberOfPassword: false,
      };
      this.passwordClick = this.passwordClick.bind(this);
    }
    
    
    passwordClick() {
        this.setState({
          display: true
        });
     }
     
     handleChange(field, e){    
        let errors = {};
         
        let fields = this.state.fields;
        fields[field] = e.target.value;        
        this.setState({fields});
        
        if(!fields["password"]){
           errors["EmptyPassword"] = "Cannot be empty";
        }
        
        if(typeof fields["password"] !== "undefined"){ //8文字以上打ち込むと、stateの値をtrueに変更
           if(fields["password"].match(/^.{8,}$/)){
            //   formIsValid = false;
              this.setState({NumberOfPassword: true});
           }        
        }
     }
    
    render(){
      return(
        <div className='signup'>
          <h1>Create Account</h1>    
          <div><input type="text" name="name" placeholder="name"/></div>
          <div><input type="text" name="email" placeholder="email"/></div>
          <div className="wrapperPassword">
            <input type="text" name="password" placeholder="password" 
                onClick={this.passwordClick}
                onChange={this.handleChange.bind(this, "password")}
                value={this.state.fields["password"]}
            />
            { this.state.display ? <PasswordBallon /> : null }
          </div>
          <div><input type="text" name="passConfirm" placeholder="confirm password"/></div>
        </div>
      );
    }
}