Why all the cards get activated when i click the active button of a specific card?

When I click the active button of a specific card to make it active, all of the cards get activated. Here I used the variable className and I set it manually to the value : “card mb-3 border-3”, and I want when clicking the button active, the className should have a border of the value : “border-info”, but I still get all the cards activated although I used the parameter id to differentiate between them. Please how to solve this problem?

function GridMod({articles, updateArticleList}) {

    const [className, setClassName] = useState("card mb-3 border-3");

    const Status = (id) => {
        let classname = className;
        
        if(articles.filter((article) => article.id === id))
        {
            if(classname == "card mb-3 border-3"){
                setClassName("card mb-3 border-info border-3")
            }
            console.log("activated!")
        }
    };`

    const Remove = async (id) => {
        try {
            await axios.delete(`http://localhost:3001/articles/${id}`);
            const updatedArticles = articles.filter((article) => article.id !== id);
            updateArticleList(updatedArticles);
        } catch (error) {
            console.error(error);
        }
    }

    return (
        <div className='container'>
                <div className="container">
                <div className="row">
                    {
                        articles.map((article)=>(    
                        <div className="col-sm" >
                        <div className={className} key={article.id}  style={{width:"18rem"}}>
                            <img className="card-img-top" src={article.image} alt="Card image cap"style={{height:"250px" }} />
                            <div className="card-body">
                            <h5 className="card-title">{article.title}</h5>
                            <p className="card-text">{article.description}</p>
                            <Link to={`/blog/edit/${article.id}`} className='btn btn-primary'>
                            <AiFillAlipayCircle/> Edit blog
                            </Link>  &nbsp;&nbsp;
                            <button onClick={() =>Remove(article.id)}>Delete</button>  &nbsp;&nbsp;   
                            <button onClick={()=>Status(article.id)}>Active</button>
                            </div>
                            </div>
                        </div>
                        ))
                    }
                </div>
                </div>
        </div>
    );
}
export default GridMod;