Al dejar el campo vacio me oculta todo el elemento search office Lo que necesito es que solo me oculte el mensaje de ( searchTerm ? <p>No se encontró el resultado.</p> : null ) dentro del elemento option, no search office ya que necesito que sea estatico const database = [ { id: 1, name: 'Electricista' }, { id: 2, name: 'Plomero' }, { id: 3, name: 'Cocinero' }, // ... otros elementos del JSON ]; interface SearchResult { id: string; name: string; } const SearchOffice: React.FC = () => { const [searchTerm, setSearchTerm] = useState(''); const [selectedResult, setSelectedResult] = useState(''); const [clickedResults, setClickedResults] = useState<SearchResult[]>([]); const [showButton, setShowButton] = useState(true); const [notFound, setNotFound] = useState(false); const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => { if (event.key === 'Enter') { if (!clickedResults.some(item => item.name === searchTerm)) { setSelectedResult(searchTerm); setShowButton(true); setNotFound(false); } else { window.alert('¡El resultado ya ha sido agregado!'); } } }; const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const value = event.target.value; setSearchTerm(value); // Buscar coincidencias en la base de datos y establecer el resultado seleccionado automáticamente const found = database.find(item => item.name.toLowerCase() === value.toLowerCase()); if (found) { setSelectedResult(found.name); setShowButton(true); } else { setSelectedResult(''); setShowButton(false); } setNotFound(false); // Restablecer "no encontrado" al modificar el texto de búsqueda }; const handleClick = () => { if (!clickedResults.some(item => item.name === selectedResult)) { const found = database.find(item => item.name.toLowerCase() === selectedResult.toLowerCase()); if (found) { const newResult: SearchResult = { id: Date.now().toString(), name: selectedResult }; setClickedResults(prevResults => [...prevResults, newResult]); setShowButton(false); } } else { window.alert('¡El resultado ya ha sido agregado!'); } }; const handleDelete = (id: string) => { const updatedResults = clickedResults.filter(item => item.id !== id); setClickedResults(updatedResults); }; const searchInDatabase = () => { const found = database.find( item => item.name.toLowerCase() === selectedResult.toLowerCase() ); return found !== undefined; }; return ( <div className="search-main"> <input type="text" value={searchTerm} onChange={handleChange} onKeyPress={handleKeyPress} className="job-bar" /> {selectedResult && ( <div className="search-office"> {searchInDatabase() ? ( <div className="search-result"> {showButton && ( <button onClick={handleClick} className="button-result"> {selectedResult} </button> )} {clickedResults.map(({ id, name }) => ( <div key={id} className="option"> <p> <button onClick={() => handleDelete(id)}>X</button> {name} </p> </div> ))} </div> ) : ( searchTerm ? <p>No se encontró el resultado.</p> : null )} </div> )} </div> ); };

function that: Al dejar el campo vacio me oculta todo el elemento search office
Lo que necesito es que solo me oculte el mensaje de  (
            searchTerm ? <p>No se encontró el resultado.</p> : null
          ) dentro del elemento option, no search office ya que necesito que sea estatico

const database = [
  { id: 1, name: 'Electricista' },
  { id: 2, name: 'Plomero' },
  { id: 3, name: 'Cocinero' },
  // ... otros elementos del JSON
];

interface SearchResult {
  id: string;
  name: string;
}

const SearchOffice: React.FC = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedResult, setSelectedResult] = useState('');
  const [clickedResults, setClickedResults] = useState<SearchResult[]>([]);
  const [showButton