طلب مساعدة

السلام عليكم.

أجد مشكلة في حسن توظيف react hooks.

في المثال التالي

عند النقر على زر معين أريد تغيير الكلاس فقط للزر الذي وقع النقر عليه.

( أنا عندما أنقر على الزر يتغير الكلاس الخاص بكل العناصر)

الكود:

import React,{useState} from 'react'
import'../../assets/css/custom.css'

function SideBarMenu() {
    let accordionMenuDivInside = [
        {
            id : 1,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 2,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 3,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 4,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
        {
            id : 5,
            img_src : "test.png",
            content : "Living Room",
            ul : {
                li_1 : "Sofa",
                li_2 : "Beds",
                li_3 : "Tv Units",
            }
        },
    ]

    const [active , setActive] = useState('accordion')
    const handleClick = () =>{
        active === 'accordion' ? setActive('accordion active') : setActive('accordion')
    }

  return (
    <div className="accordionMenuDiv">
        <div className="accordionMenuDivInside">
            {
                accordionMenuDivInside.map(item => {
                    return (
                            <React.Fragment key={item.id}>
                                <button className={active} onClick={handleClick}>
                                    <img className="accordionMenuIcon" 
                                    alt='' src={item.img_src}
                                    /> 
                                    {item.content}
                                </button>
                                <div className="panel">
                                    <ul>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_1}</a></li>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_2}</a></li>
                                        <li><a href="/#" className="accordionItem" > {item.ul.li_3} </a></li>
                                    </ul>
                                </div>
                            </React.Fragment>
                            ) 
                })
            }
            
        </div>
    </div>
  )
}

export default SideBarMenu

شكرا.