Использование jquery в ReactJs

Question

HTML:

JS:

var Counter = React.createClass({
    getInitialState : function() {
       return {
         list:['one','two'],
         flag: 1
       }
    },
    changeFlag : function() {
       this.setState({flag:2});
    },
    render : function() {
       var list = this.state.list;
       var flag = this.state.flag;
       return ( 
          <div>
              <ul id="list">
              {
                  list.map((item, index) => (
                      <li>{item}</li>
                  ))
              }
              </ul>
             <button onClick={this.changeFlag}>{flag}</button>
         </div>
      );
  }
})
ReactDOM.render( <Counter />, document.getElementById('content') );

setTimeout(function(){
   document.getElementById('list').childNodes[0].innerText= 'three'
},2000)

Я инициализировал список "один" и "два". Теперь я напрямую обновляю DOM с помощью jquery и изменил значение "один" на "три" после тайм-аута в 2 секунды. Теперь, нажав на кнопку, я снова в состоянии, чтобы повторно визуализировать компонент.

Теперь мой вопрос: если я напрямую изменю DOM с "один" на "три", виртуальный DOM все равно будет содержать значение "один", поэтому в следующий раз, если я изменю состояние, он будет проверять виртуальный DOM с DOM браузера, и следует обновить браузер DOM с помощью виртуального DOM. В моем случае значение "три" по-прежнему сохраняется после нажатия на кнопку, как это происходит?