How to close component via changing the state

Question

I'm iterating over array of advertisements and show them on the screen. When user click on one of the advertisements he activate the value of 'extension' to true, and the FavPageExtension component become visible, presenting the extended information about this specific advertisement.

return (

       <div className={styles.width}  >


           {favAdd.map((r, index) =>   

               <div id={r.M_id}
                   className={styles.mainwrapper_} onClick={() => setextesion(true)}  >


//some code that present the addvertisments 

                 

                   {extesion && <FavPageExtension f={r} setcurrentImg={setcurrentImg} setimgcounter={setimgcounter} settotalimgcounter={settotalimgcounter}
                       setmodaladdInfo={setmodaladdInfo} currentImg={currentImg} totalimgcounter={totalimgcounter} imgcounter={imgcounter}
                       setmailmodal={setmailmodal} index={index} setextesion={setextesion} extesion={extesion} ></FavPageExtension>}

               </div>)}



       </div>

   )

to close the FavPageExtension component I set 'extension' value to false onclick:

function FavPageExtension({ f, setcurrentImg, setimgcounter, settotalimgcounter, setmodaladdInfo, currentImg, totalimgcounter, imgcounter,
    setmailmodal, index, setextesion }) {

    return (

        <div   className={styles.modal}>


            <div className={styles.toresults}>
                <div onClick={() => setextesion(false)} className={styles.text3}>חזרה לתוצאות חיפוש</div>
                <FontAwesomeIcon icon={faChevronLeft}></FontAwesomeIcon>
            </div>
//code that present the extended information
 </div>

the problem is that although I pass the 'setextension' to the FavPageExtension component where he is activated onClick nothing happens. no error, but the FavPageExtension component continue become opened, and I cant close him in no way.

Any help would be really appreciated!