I am trying to create the following item for my react project http://demo.icanbecreative.com/css3-animated-search-box/ using this reference tutorial https://icanbecreative.com/article/css3-animated-search-box/. but I am having a problem trying to implement the following function

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('');
        }
}

Because it uses JQuery, so I want to convert this function to be able to execute it inside my code. Try to hide the element and show it dynamically every time you press the button as follows

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>

But it is not working.but it is not working, the button appears correctly but when pressed it does not show the input