useEffect not triggered when a deeply nested JSON is updated

Hi All I'm a beginner and stuck with this issue for a couple of hours ,So im working with deeply nested json and whenever i update a value deep inside the JSON tree ,the useEffect hook doesn't recognize it ,how do I go about doing it ??

Here is my code flow ,so the value to be updated i get the path of it using this function

  function findValuePath(data, targetValue, currentPath = "") {
    if (typeof data === "object" && data !== null) {
      for (let key in data) {
        const path = currentPath ? `${currentPath}.${key}` : key;
        if (data[key] === targetValue) return path;
        const result = findValuePath(data[key], targetValue, path);
        if (result) return result;
      }
    }
  }

once i have the value path i update the orderSubstatus in the nested json

  function updateNestedJSON(json, path, value) {
    const keys = path.split(".");
    let current = json;

    for (let i = 0; i < keys.length - 1; i++) {
      const key = keys[i];
      if (!current[key]) {
        current[key] = {};
      }
      current = current[key];
    }

    const lastKey = keys[keys.length - 1];
    current[lastKey] = value;

    return json;
  }

The above two functions are used as below

  function handlePathAndUpdateSelected() {
   var temp;
   
    checkedArr.forEach(function (item) {
      const data = findValuePath(fetchedData, item);

      const cleanup =
        data.substr(0, data.lastIndexOf(".") + 1) + "orderSubStatus";
      temp = updateNestedJSON(fetchedData, cleanup, 2);
    });
    setfetchedData(temp);

  }

i am changing the value from 1 to 2 (orderSubStatus)<br>The data gets updated ,but when i set it using state it doesn't trigger useEffect change ,how do i possibly go about doing this ?

Click accept all and check console logs in the snack
Snack here

This is related to React-Native rules.

useEffect will use comparator to check whether any state is updated. When you use setfetchedData(temp), and temp is a shallow copy of fetchedData, java-script will think that they are the same item and does not treat as a change. So, useEffect() will not trigger.

To fix this issue, mostly we will use spread operator (...). It will create a brand new copy which is not referring the same item in programming logic.

function handlePathAndUpdateSelected() {
   var temp;
   
    checkedArr.forEach(function (item) {
      const data = findValuePath(fetchedData, item);

      const cleanup = data.substr(0, data.lastIndexOf(".") + 1) + "orderSubStatus";
      temp = updateNestedJSON(fetchedData, cleanup, 2);
    });

    //Change this line
    setfetchedData([...temp]);
  }