Tengo un fragmento de código en React, donde si uso newArray = [... oldArray] funciona, pero si uso newArray = oldArray no funciona. ¿Puedes decirme porque?

Debajo del código. Se trata de agregar una lista de tareas al hacer clic en el botón Agregar. Hasta ahora funciona. Luego, cuando haga clic en un elemento de la lista de tareas pendientes, debería cambiar de clase y quedar 'resaltado'. Si uso newArray = oldArray, el estado se actualiza correctamente pero luego nada cambia en la pantalla:

 const Todo = () => { const [item, setItem] = useState(''); const [itemList, setItemList] = useState([]); const onChange = (e) => { setItem(e.target.value); }; const handleClick = () => { setItemList((prevState) => [ ...prevState, { id: Math.random(), item: item, isDone: false }, ]); setItem(''); }; const handleItemClass = (i) => { const updatedItemList = itemList; updatedItemList[i].isDone = !updatedItemList[i].isDone; setItemList(updatedItemList); }; return ( <React.Fragment> <div> <input type="text" onChange={onChange} value={item} /> <button onClick={handleClick}>Add</button> </div> <p> {itemList.filter((el) => el.isDone).length} completed from{' '} {itemList.length} </p> <ul> {itemList.map((itemCurrent, i) => ( <li key={itemCurrent.id} onClick={() => handleItemClass(i)} className={itemCurrent.isDone ? 'is-done' : 'not-done'} > {itemCurrent.item} </li> ))} </ul> </React.Fragment> ); }; export default Todo; render(<Todo />, document.getElementById('root'));