Мелкий рендеринг неожиданного поведения

Question

У меня есть компонент с именем 'Grid', имеющий такой метод рендеринга -

render(){
  this.createTable();

  return (
    <div
      style={{display:'flex',justifyContent:'center',flexDirection:'column'}}
    >
      <input
        id='gridFilterText'
        placeholder="filter text here....."
        style={{width:'50%',height:'25px',borderRadius:'4px'}}
        onChange={this.onType} 
        value={this.state.value}
      ></input>
      <table style={{flex:'0.5',borderRadius:'4px',boxShadow:'-1px 3px 4px 0px black'}}>
        <thead style={{textDecoration:'underline'}}>
          <tr>
            {this.headerArr}
          </tr>
        </thead>
        <tbody>
          {this.tableBody}
        </tbody>
      </table>
    </div>
  );
}

createTable() {
  this.headerArr = this.props.headerList.map((item,index)=>(
    <th key={index}>
      {item}
    </th>
  ));

  this.tableBody = this.filteredProdList.map((item,index)=>(
    <tr key={index} onMouseOver={this.onFocus} onMouseOut={this.onFocusRemove}>
      {Object.keys(item).map((key,index)=>(
        <td key={index}>{item[key]}</td>
      ))}
    </tr>
  ))
}

Я пытался проверить это с помощью этого сценария теста (Jest and Enzyme) -

test('Grid filters properly',()=>{
  const gridWrapper=mount(<Grid headerList={['Id','Name','Stock']} prodList={items}/>);
  const textBoxWrapper=gridWrapper.find('#gridFilterText');
  textBoxWrapper.simulate('change',{target:{value:'p'}});  
  gridWrapper.update();
  console.log(textBoxWrapper.debug());

  expect(
    gridWrapper
    .find('table')
    .children()
    .find('tbody')
    .children()
  ).toHaveLength(2);
})

То, что я пытаюсь получить здесь -

1. Визуализация компонента Grid
2. Компонент сетки имеет элемент управления (он не является дочерним компонентом)
3. Имитация OnChange для элемента управления путем установки значения (value = 'p')
4. Это должно привести к тому, что сетка будет отображать отфильтрованный вывод (2 строки)

Почему это работает, только еслиЯ использую mount, и он не работает, если я использую мелководье.Насколько я понимаю, мелкие работы над компонентом и переходят к дочерним компонентам.В этом случае является частью компонента, а не его дочерним компонентом, верно?

Пожалуйста, дайте мне знать, если я могу уточнить далее.