How to update nested object state in React

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.

State:

  const [option, setOption] = useState([
    { permission: 'Can manage users', isSelected: true },
    { permission: 'Can place orders', isSelected: true },
  ]);

Component:

      {option.map(({ permission, isSelected }, i) => (
          <CheckboxIcon
            viewed={isSelected}
            onPress={() =>
              setOption(prev => {
                prev[i] = { ...prev[i], isSelected: !isSelected };
                return prev;
              })
            }
          />

Checkbox svg:

const CheckboxIcon = ({
  width = 26,
  height = 26,
  viewed,
  fill = Colors.success,
  tickAccountSize,
  onPress,
}) => (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      overflow="visible"
      preserveAspectRatio="none"
      width={width}
      height={height}>
      <Path
        d="M1 1h24v24H1V1z"
        vectorEffect="non-scaling-stroke"
        fill="transparent"
      />
      <IconContainer onPress={onPress} width={width} height={height}>
        {viewed && <TickIcon tickAccountSize fill={fill} />}
      </IconContainer>
    </Svg>
);

Answer

The problem is in onPress, you are mutating the option state directly. Because of that the option state keeps the same reference in memory. Now even if you change something, react does not know if it should re-render and decides to nor re-render. The solution to this problem is to create a copy of the state, so that we have a new reference to work with. In this copy we can modify it as we like and then set the new reference as option state. Now react re-renders since it detects a new reference.

The code could look like this:

            onPress={() =>
              setOption(oldOption => {
                const newOptions = [...oldOption];
                newOptions[i] = { ...newOptions[i], isSelected: !newOptions[i].isSelected};
                return newOptions;
              })