title: Input value saved in child component's state disappears when the search filter is applied on the parent component
body: <p>I have a child component called, <code>Book</code>, and a parent component called, <code>Books</code>.</p>
  <p>Within the child component, I provide users with an <code>input</code> to add a genre tag. These tags are not persisted anywhere and is solely saved in <code>genreTags</code>.</p>
  <p>In the parent component, I have a search filter set up to filter the book by its title, but whenever my search terms filter out certain books and I backspace, my child component rerenders and my tags are subsequently removed.</p>
  <p><strong>Is there anyway to prevent this type of rerendering or is there a way to persist the tags' data (aside from persisting into the backend, which I don't have access to)?</strong> I've tried moving the genreTags' state into the parent component, but this causes all the books to have the same genre tags.</p>
  <p><strong>Parent Component:</strong></p>
  <pre><code>export default function Books() {
    const [books, setBooks] = useState([])
    const [searchTitle, setSearchTitle] = useState(&quot;&quot;)
  
    useEffect(() =&gt; {
      fetch(`https://www.someapi/books`)
      .then(r =&gt; r.json())
      .then(setBooks)
    }, [])
  
    const filterBooks = books.filter(book =&gt; {
      return book.title.toLowerCase().includes(searchTitle.toLowerCase())
    })
  
    const book = filterBooks.map(book =&gt; {
      return (
          &lt;Book 
              key={book.id} 
              book={book}
          /&gt;
      )
    })
  
    return (
      &lt;div className=&quot;main-container&quot;&gt;
        &lt;Search
          searchTitle={searchTitle}
          onSearchTitle={setSearchTitle}
        /&gt;
        {book}
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p><strong>Child Component:</strong></p>
  <pre><code>export default function Book({ book }) 
      const [genreTags, setGenreTags] = useState([])
  
      function handleAddGenre(e) {
          const val = {
              id: book.id,
              label: e.target.value,
          }
  
          if (e.key === 'Enter' &amp;&amp; val) {
              if (genreTags.find(genre =&gt; genre.toLowerCase() === val.toLowerCase())) {
                return
              }
              setGenreTags([...genreTags, val])
              e.target.value = &quot;&quot;
          }
      }
  
      return (
          &lt;div className=&quot;book-div&quot;&gt;
              &lt;p&gt;{title}&lt;/p&gt;
              &lt;p&gt;Written By: {author}&lt;/p&gt;
          &lt;/div&gt;
          &lt;div className=&quot;tag-div&quot;&gt;
              &lt;ul&gt; 
                  { genreTags &amp;&amp; genreTags.map(tag =&gt; {
                      return &lt;li key={uuid()}&gt; {tag.label} &lt;/li&gt;  
                  })}
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;input 
              type=&quot;text&quot; 
              placeholder=&quot;Add a genre&quot;
              onKeyDown={handleAddGenre} 
          /&gt;
      );
  }
  </code></pre>
  <p><strong>Search Component:</strong></p>
  <pre><code>    return (
          &lt;div className=&quot;search&quot;&gt;
              &lt;input 
                  placeholder=&quot;Search by title&quot;
                  value={searchTitle}
                  onChange={e =&gt; onSearchTitle(e.target.value)} 
              /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>