Highlight strings that match a search term
Rather than extract the Search input in to a different component I would suggest you keep the input and list in the same component.

This way when printing the list you can highlight the search term directly.

const HighlightableList = (props) =&gt; {
  const [searchTerm, setSearchTerm] = React.useState("");
  const regex = new RegExp(searchTerm, "gi");

  const items = props.terms.map((term, index) =&gt; (
      &lt;div
        className="label"
        key={index}
        dangerouslySetInnerHTML={{
          __html: term.replace(regex, match =&gt; `&lt;span class="highlight"&gt;${match}&lt;/span&gt;`)
        }}
      /&gt;
    ));

    return (
      &lt;&gt;
        &lt;input 
          type="text"
          value={searchTerm}
          placeholder="Search Labels"
          onChange={event =&gt; setSearchTerm(event.target.value)}
        /&gt;
        &lt;div className="label-container"&gt;
          {items}
        &lt;/div&gt;
      &lt;/&gt;
    );
}


https://codepen.io/rockingskier/pen/YzKrGNR

Side notes:

Don't make each list item a label. From MDN


  The HTML  element represents a caption for an item in a user interface.


That would suggest that each item in the list has its own user input.  In fact there is only one input (search) and that should really have a label of its own.  I'll let you implement that.

Additionally due the the "list-iness" of the data I have converted it to a ul with each item as an li.