title: How to update nested object state in React
body: <p>I have multiple checkbox svgs which i'm mapping over which removes the inner tick icon when I manually set either of the isSelected states to false.
  I want to remove/add the tick icon svg when I press the checkbox in my app.
  Im unsure where Im currently going wrong in my logic. It works correctly when I manually change the isSelected state to false but not when I press the checkbox.</p>
  <p>State:</p>
  <pre><code>  const [option, setOption] = useState([
      { permission: 'Can manage users', isSelected: true },
      { permission: 'Can place orders', isSelected: true },
    ]);
  </code></pre>
  <p>Component:</p>
  <pre><code>      {option.map(({ permission, isSelected }, i) =&gt; (
            &lt;CheckboxIcon
              viewed={isSelected}
              onPress={() =&gt;
                setOption(prev =&gt; {
                  prev[i] = { ...prev[i], isSelected: !isSelected };
                  return prev;
                })
              }
            /&gt;
  </code></pre>
  <p>Checkbox svg:</p>
  <pre><code>const CheckboxIcon = ({
    width = 26,
    height = 26,
    viewed,
    fill = Colors.success,
    tickAccountSize,
    onPress,
  }) =&gt; (
      &lt;Svg
        xmlns=&quot;http://www.w3.org/2000/svg&quot;
        overflow=&quot;visible&quot;
        preserveAspectRatio=&quot;none&quot;
        width={width}
        height={height}&gt;
        &lt;Path
          d=&quot;M1 1h24v24H1V1z&quot;
          vectorEffect=&quot;non-scaling-stroke&quot;
          fill=&quot;transparent&quot;
        /&gt;
        &lt;IconContainer onPress={onPress} width={width} height={height}&gt;
          {viewed &amp;&amp; &lt;TickIcon tickAccountSize fill={fill} /&gt;}
        &lt;/IconContainer&gt;
      &lt;/Svg&gt;
  );
  </code></pre>