Estoy tratando de crear el siguiente elemento para mi proyecto de reacción http://demo.icanbecreative.com/css3-animated-search-box/ usando este tutorial de referencia https://icanbecreative.com/article/css3-animated-search- caja/ . pero tengo un problema al intentar implementar la siguiente función

 function searchToggle(obj, evt){ var container = $(obj).closest('.search-wrapper'); if(!container.hasClass('active')){ container.addClass('active'); evt.preventDefault(); } else if(container.hasClass('active') && $(obj).closest('.input-holder').length == 0){ container.removeClass('active'); // clear input container.find('.search-input').val(''); } }

Debido a que usa JQuery, quiero convertir esta función para poder ejecutarla dentro de mi código. Intente ocultar el elemento y mostrarlo dinámicamente cada vez que presione el botón de la siguiente manera

 const [showInput, setShowInput] = useState(false); <div className="search-wrapper"> <div className="input-holder"> <button className="search-icon" onClick={()=>setShowInput((p) => !p)}><span></span></button> {showInput && <input type="text" className="search-input" placeholder="Type to search" /> } </div> <span className="close" onClick={displaySearchToggle}></span> </div>

Pero no funciona. Pero no funciona, el botón aparece correctamente pero al presionarlo no muestra la entrada.