Why onClick handler not changing className of icon tag?

Whenever i am clicking on square icon which have onClick handler linked with it it does not change className of that icon .

Inside the icon tag if box.isChecked === true then i want to show className of "far fa-check-square icon"
but if box.isChecked === false then i want to show className of "far fa-square icon " . But it is not working .

App js file :

import React , {useState} from 'react'const data = [{    id:0,    para:"This is Box One",    isChecked:false},{    id:1,    para:"This is Box Two",    isChecked:false},{    id:2,    para:"This is Box Three",    isChecked:false},{    id:3,    para:"This is Box Four",    isChecked:false}];const App = () => {let [list,setList] = useState(data);const checked = (id) => {    for(let i = 0;i < list.length;i++){        if(i === id){            if(list[i].isChecked === false){                list[i].isChecked = true;                break;            }else{                list[i].isChecked = false;                break;            }        }    }    let newList = list;    console.log(newList);    setList(newList);}return(<>        {list.map((box) => {            return (<div className="box" key={box.id}><i className={box.isChecked === true ? "far fa-check-square icon":"far fa-square icon"} onClick={() => checked(box.id)}> </i><p className="para"> {box.para} </p></div>            )        })}</>)}export default App;

Index js file :

import React from 'react'import ReactDOM from 'react-dom'import App from './App'import './index.css'ReactDOM.render(<App />,document.getElementById("root"));

Index css file :

*{margin:0px;padding:0px;box-sizing:border-box;}.box{width:250px;padding:15px;margin:0px 0px 15px 0px;background-color:rgb(81, 162, 255);}.icon{font-size:25px;cursor:pointer;color:white;margin:0px 0px 5px 0px;}.para{font-size:20px;font-family:arial;color:white;}