title: delete nested array item in global state when using hooks
body: <p>I am trying to use hooks to delete an item in a nested state when click on the item. What's the correct way to do it?</p>
  
  <pre><code>const ParentComponent = () ={
    const initialState = {
    key : 1
    color: red
    child1 :{
        child2: {
          [{id: 1
            value: 10},
           {id: 2
            value: 20},
           {id: 3
            value: 30},
          ]
       }
    }
    const {itemList, setItemList} = useState(initialState)
  
    const handleRemoveClick = (item) =&gt; {
       setState(prevState =&gt; {
          const setItemList = prevState.child1.child2.filter(o =&gt; o.id !== item.id);
          return { newState }
          })
  }
  
  </code></pre>
  
  <p>Expect to have item 1 removed when click on item 1</p>