title: React - input loses focus on keypress
body: <p>I have run into a weird bug with my search input component where it loses focus on every keypress and can't figure out why.</p>
  
  <pre><code>const App = () =&gt; {
    let [characters, setCharacters] = useState([]);
    let [filteredCharacters, setFilteredCharacters] = useState([]);
    // more state
    let [search, setSearch] = useState("");
  
    useEffect(() =&gt; {
      setIsLoading(true);
      axios
        .get(`https://swapi.co/api/people/?page=${pageNumber}`)
        .then(res =&gt; {
          console.log(res.data.results);
          setCharacters(res.data.results);
          setFilteredCharacters(res.data.results);
        })
        .catch(err =&gt; console.error(err))
        .then(() =&gt; {
          setIsLoading(false);
        });
    }, [pageNumber]);
  
    function updatePage(e) {
       // update page
    }
  
    function handleSearch(e) {
      setSearch(e.target.value);
      const filtered = characters.filter(character =&gt; {
        if (character.name.toLocaleLowerCase().indexOf(e.target.value) !== -1) {
          return character;
        }
      });
      setFilteredCharacters(filtered);
    }
    function SearchBar() {
      return (
        &lt;React.Fragment&gt;
          &lt;StyledInput
            type="text"
            id="search"
            value={search}
            placeholder="Search by name..."
            onChange={e =&gt; handleSearch(e)}
          /&gt;
        &lt;/React.Fragment&gt;
      );
    }
  
    return (
      &lt;React.Fragment&gt;
        &lt;GlobalStyles /&gt;
        &lt;div className="App"&gt;
          &lt;Heading&gt;React Wars!&lt;/Heading&gt;
          &lt;SearchBar /&gt;
          &lt;Pagination handleClick={updatePage} /&gt;
          {!isLoading &amp;&amp; Object.entries(filteredCharacters).length ? (
            &lt;CharacterList characters={filteredCharacters} /&gt;
          ) : (
            &lt;LoadingBar /&gt;
          )}
        &lt;/div&gt;
      &lt;/React.Fragment&gt;
    );
  };
  </code></pre>
  
  <p>I'm also getting a <code>Line 65:50:  Expected to return a value at the end of arrow function  array-callback-return</code> for the <code>characters.filter()</code> line so I don't know if that has to do with it.</p>
  
  <p>If it helps, the deployed app with the bug can be seen here --> <a href="https://mundane-vacation.surge.sh" rel="noreferrer">https://mundane-vacation.surge.sh</a></p>