title: Updating react useState hook nested 2d array
body: <ol>
  <li>Hii I'm trying to update my nested 2d board field state with no success.</li>
  </ol>
  <p>Is there any simpler way to store 2d array?</p>
  <pre><code>export default function Game() {
      const [state, setState] = useState({
          board: [
              [null, &quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;],
              [&quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;, null],
              [null, &quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;, null, &quot;B&quot;],
              [&quot;X&quot;, null, &quot;X&quot;, null, &quot;X&quot;, null, &quot;X&quot;, null],
              [null, &quot;X&quot;, null, &quot;X&quot;, null, &quot;X&quot;, null, &quot;X&quot;],
              [&quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;, null],
              [null, &quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;],
              [&quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;, null, &quot;G&quot;, null],
          ],
          greyTurn: true,
          chess: null,
          dest: null,
      });
  
  
  
  
  const update = () =&gt; {
          setState(prevState =&gt; ({...prevState, board[0,0]: 'G'}))
      }
  
  
  return (
  &lt;&gt;
     &lt;button onClick={update}&gt;&lt;/button&gt;
  &lt;&gt;
  )
  </code></pre>
  <ol start="2">
  <li>Changing the update function to this one</li>
  </ol>
  <blockquote>
  <p>const update = () =&gt; {
  const newState = [...state.board];
  newState[0][0] = 'G';
  }</p>
  </blockquote>
  <p>actually make the update state, but I don't understand why, didn't I just create deep state.board copy? why manipulating this deep copy actually make change in my state.board?</p>