Estoy trabajando en un componente Typeahead en reaccionar.

Actualmente, solo estoy filtrando los datos a través de una entrada de texto y luego mapeándolos para mostrar las opciones filtradas en el DOM. Eso está llegando, pero me gustaría mostrar "No se encontraron elementos" si la búsqueda no arroja nada.

Así es como devuelvo los artículos <li></li> :

 <ul className="search-container__dropdown" onClick={(e) => e.stopPropagation()} style={{ display: show ? 'block' : 'none' }}> {comments.length > 0 ? comments .filter(({ body, name }) => { if (!input) return true; if (body.includes(input) || name.includes(input)) { return true; } return false }) .map(({ id, name, body, notfound }, index, arr) => { return ( <li onClick={() => handleClick(id)} className={`search-container__option ${id === cur_section ? "active" : ""}`} key={id} value={name}> <strong>name: </strong>{name},<br /> <strong>body: </strong>{body} </li> ) }) : <NothingFound />} </ul>

Este es el componente NothingFound:

 function NothingFound() { return <li>Nothing found</li> }

¿Qué me estoy perdiendo?

¡Gracias por adelantado!