title: Search input loses focus when it doesn't find any title
body: <p>Whenever I try to search, I can type only the letters which are similar to the one of the titles. If any letter is different I lose focus from input. It used to work normally before, but Idk what happened now. Any suggestions?</p>
  <p><a href="https://i.stack.imgur.com/2KfDc.png" rel="nofollow noreferrer">How it first looks like:</a></p>
  <p><a href="https://i.stack.imgur.com/UVcgy.png" rel="nofollow noreferrer">After starting to type on search input:</a></p>
  <p><a href="https://i.stack.imgur.com/VJ53N.png" rel="nofollow noreferrer">When I type a letter which is not in the title:</a></p>
  <p>Code:</p>
  <pre><code>if (props.items.length === 0) {
      return (
        &lt;div className=&quot;files-list center&quot;&gt;
          &lt;Card&gt;
            &lt;h2&gt;No files found.&lt;/h2&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    } else if (
      props.items.filter(
        (file) =&gt;
          file.title.toLowerCase().includes(searchInput) ||
          file.title.toUpperCase().includes(searchInput)
      ).length === 0
    ) {
      return (
        &lt;div className=&quot;filesList&quot;&gt;
          &lt;div className=&quot;search&quot;&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Search Files&quot;
              onChange={(event) =&gt; setSearchInput(event.target.value)}
            /&gt;
          &lt;/div&gt;
          &lt;Card&gt;
            &lt;h2&gt;No files found.&lt;/h2&gt;
          &lt;/Card&gt;
        &lt;/div&gt;
      );
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;div className=&quot;filesList&quot;&gt;
          &lt;div className=&quot;actionsBtn&quot;&gt;
            &lt;NavLink to=&quot;/add-file&quot; className=&quot;addFileBtn&quot; title=&quot;Add File&quot;&gt;
              &lt;FontAwesomeIcon icon={faPlus} /&gt;
            &lt;/NavLink&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Search Files&quot;
              onChange={(event) =&gt; setSearchInput(event.target.value)}
            /&gt;
          &lt;/div&gt;
          &lt;ul className=&quot;files-list&quot;&gt;
            {props.items
              .filter(
                (file) =&gt;
                  file.title.toLowerCase().includes(searchInput) ||
                  file.title.toUpperCase().includes(searchInput)
              )
              .map((file) =&gt; (
                &lt;FilesPostItem
                  key={file.id}
                  id={file.id}
                  title={file.title}
                  file={file.file}
                  creator={file.creator.name}
                  description={file.description}
                  creatorId={file.creator}
                  onDelete={props.onDeleteFile}
                /&gt;
              ))}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  </code></pre>