UP and Down Arrow Icons functionality not working in Reactjs

Question

Basically I need to show and Hide the div, Up and Down Arrow Icons should change accordingly. As of Now only UP arrow Icon is working and displaying the div, but when i try to hide the div, it is not working....I did like this and its not working, What wrong in my code? Can Anyone help me in this?

Here is my Code

const [expand, setExpand] = useState(false); 

<div onClick={() => setExpand(true)}> 
    Accordion 
    <i className={`fas fa-chevron-up ${!expand ? 'fas fa-chevron-down' : ''}`}></i>
</div>
{expand && <div className="Accordion-Section"></div>}

Answer 1

You can set the className like this

<div onClick={() => setExpand(!expand)}> 
    Accordion 
    <i className={`fas ${expand ? 'fa-chevron-up' : 'fa-chevron-down'}`} />
</div>
{expand && <div className="Accordion-Section"></div>}

Answer 2

The click handler is setting the state true everytime.

You should change it to <div onClick={() => setExpand( expand)}> .

Answer 3

you should change "i" tag to this:

<i className={ ${?expand: "fas fa-chevron-down" "fas fa-chevron-up"} }>