Add an object to nested array in React-Recoil - reactjs

Question

I am trying to update an object to the nested array
and the code below works well when I tried with React Hooks, using useState to update the state.
Then I tried to add a state management library named Recoil, a new library from Facebook, which is super simple and behaves like Hooks.
But after I changed my code adding some Recoil codes, like the atom, useRecoilState, adding a new object to the nested array stopped working.
I tried a few different methods to solve this and find other solutions but didn't go well.
Does anyone know how to solve this? You can check the code and codesandbox link below.
https://codesandbox.io/s/nested-arrays-qrw95?file=/src/App.js:0-1547
import React from "react";
import { RecoilRoot, atom, useRecoilState } from "recoil";
const todoListState = atom({
key: "TodoList",
default: [
{
name: "Lee",
device: [
{ name: "MBPR", price: 3000 },
{ name: "MBA", price: 2000 }
]
}
]
});
export function TodoApp() {
const [list, setList] = useRecoilState(todoListState);
return (
<>
{list.map((x, i) => {
return (
<div style={{ border: "1px solid black", textAlign: "left" }} key={i}>
<div>{x.name}</div>
<div>Devices</div>
<ul>
{x.device.map((y, j) => {
return (
<>
<li key={j}>{y.name}</li>
</>
);
})}
</ul>
<button
onClick={() => {
const clone = [...list];
clone[i].device = [...clone[i].device, { name: "IPX" }];
setList(clone);
}}
>
Add List
</button>
</div>
);
})}
<button
onClick={() => {
const newData = { name: "Kristoffer", device: [{ name: "Nokia" }] };
setList([...list, newData]);
}}
>
Add Item
</button>
</>
);
}
export default function App() {
return (
<RecoilRoot>
<div className="App">
<TodoApp />
</div>
</RecoilRoot>
);
}