React – Handling multiple state in button

I have a simple function that handle state for multiple button and create a dynamic class. Here in my code i have successfully changed the state for onclick event. I want to change the class color dynamically for onclick event, but the class isn’t changing. What did i do wrong here? I’ve been struggling with simple things

import React, { useEffect, useState } from 'react'

function Tes() {
    const lst = [
        {
            'name' : 'Python',
            'active': true,
            'disabled': false
        },
        {
            'name' : 'Java',
            'active': false,
            'disabled': true
        },
        {
            'name' : 'PHP',
            'active': true,
            'disabled': false
        },
        {
            'name' : 'C++',
            'active': true,
            'disabled': false
        },
        {
            'name' : 'Javascript',
            'active': false,
            'disabled': true
        },
        {
            'name' : 'Django',
            'active': true,
            'disabled': false
        }
    ]

    const [statebtn, setStatebtn] = useState(lst)


    function onClick(key, index) {
        let tmp = statebtn;
        tmp[index][key] = !tmp[index][key];
        setStatebtn(tmp);
        console.log(statebtn, 'fsadsada');
    }

    function changeClass(statevalue) {
        return (statevalue ? "btn-primary" : "btn-danger")
    }




    return (
        <div>
            {lst.map((x,index) => (
                <button onClick={() => onClick('active', index)} className={`btn ${statebtn[index]['active'] ? "btn-primary" : "btn-danger"}`} disabled={x['disabled']}>{x['name']}</button>
            ))
            }

        </div>
    )
}

export default Tes