Button active on array category

 const [isActive, setActive] = useState(false)

    const btnSelect = () => {
        setActive(!isActive);
    }

    return (
        <div className='flex flex-col'>
            {
                button.map((cat, i) => {
                    return (

                        <button
                            type="button"
                            onClick={() => {
                                filter(cat);
                                btnSelect();
                            }}
                            className={`title w-32 h-16 my-2 ${isActive ? 'bg-sky-500' : 'bg-red-400'}`}
                        >
                            {cat}
                        </button>

                    )
                })
            }
        </div >
    )