title: TextInput gets unfocused after typing each character
body: <p>I'm using React to build a form and I'm trying to filter a <code>list</code> with the <code>SearchInput</code> (which works the same as TextInput) located in the child component <code>Header</code>. But everytime I type a character the SearchInput gets unfocused</p>
  <pre><code>function index() {
    const list = [//data\\]
    const [search, setSearch] = useState(&quot;&quot;);
    const [filteredResults, setFilteredResults] = useState([]);
  
    const searchItems = (searchValue) =&gt; {
      setSearch(searchValue);
      if (search !== &quot;&quot;) {
        const filteredData = partners.filter((item) =&gt; {
          return Object.values(item)
            .join(&quot;&quot;)
            .toLowerCase()
            .includes(search.toLowerCase());
        });
        setFilteredResults(filteredData);
      } else {
        setFilteredResults(partners);
      }
    };
  
    const Header = () =&gt; (
      &lt;Box&gt;
        &lt;SearchInput
          placeholder=&quot;Search&quot;
          value={search}
          onChange={(e) =&gt; searchItems(e.target.value)}
        /&gt;
      &lt;/Box&gt;
    );
  
    return (
      &lt;Parent
        headerContent={&lt;Header /&gt;}
      &gt;
        &lt;Box&gt;
          &lt;Table data={search.length &gt; 1 ? filteredResults : list} /&gt;
        &lt;/Box&gt;
      &lt;/Parent&gt;
    );
  }
  
  export default index;
  </code></pre>