html – Change model based mostly on useState variable in React

I wish to animate a search icon on click on in React. I’m utilizing useRef hook to get the aspect and I go some customized model to the element.

const [searchBar, setSearchBar ] = useState(false);
const searchIcon = useRef();
const searchIconStyle = {
    transition: 'rotate .3s ease', // clean transition
    rotate: searchBar? "360deg" : "0",
}

operate handleSearchClick(e) {
    setSearchBar(prevState => !prevState);
}

So, the code from above is working first time after I click on, nevertheless it does not afterwards. The search icon is a FontAwesome element

 {searchBar && <enter kind="search" placeholder="Search product..."/>}
        <FontAwesomeIcon icon={faMagnifyingGlass} className="search-icon"
            onClick={handleSearchClick} ref={searchIcon} model={searchIconStyle}/>

How can I animate the icon on every click on (relying on the change of searchBar variable?)