How to update nested object state in react , initialize with {} , then json data that I got from api

How to update nested object state in react , initialize with {} , then json data that I got from api.

Why this code is not working:

import React, { useEffect, useState } from 'react';
import { useQuery } from 'react-query';
const App = () => {
  const [testData, setTestData] = useState({});
 
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("http://localhost:8080/api/v1/recommendations");
        const result = await response.json(); 
        setTestData(result);
      } catch (err) {
        console.error(`Found error while fetching data: ${err}`);
      }
    };

    fetchData();
  }, []); 


  useEffect(() => {

    setTestData(prevState => {
      const updatedData = {
        ...prevState,
        recommendation: {
          ...prevState.recommendation,
          rules: prevState.recommendation.rules.map(rule => {
            if (rule.scenario_name === "data_rule") {
              return {
                ...rule,
                passwhen: {
                  ...rule.passwhen,
                  STATE: "INDIA"
                }
              };
            }
            return rule;
          })
        }
      };
      return updatedData;
    });
  }, []);

  useEffect(() => {
    console.log("data", testData);
  }, [testData]);

  return (
    <div>
      <pre>{JSON.stringify(testData, null, 2)}</pre>
    </div>
  );
};

export default App;

I’m working on a React application where I need to update the state of a nested object. Initially, my state is set to an empty object {}. I fetch JSON data from an API that should populate this nested state.
After fetching the data, I want to update specific keys within this nested object. However, I’m facing issues with my approach. In the provided example, the state isn’t being initialized properly, leading to errors when attempting to update nested properties.
How should I properly initialize and update my nested object state with the fetched JSON data, ensuring that the state update is handled correctly and immutably?

Api Data

{
    "recommendation": {
        "rules": [
            {
                "scenario_name": "duplicate_check",
                "scenario_target_query": "SELECT * FROM beat2020.orders_info",
                "columns": [
                    "ORDERNO"
                ],
                "tgt_lvl_key": [
                    "ORDERNO"
                ],
                "idx": 0
            },
            {
                "scenario_name": "null_check",
                "scenario_target_query": "SELECT ORDERNO, QUANTITY_ORDERED, PRICE_EACH, SALES_PRICE, ORDERDATE, STATUS FROM beat2020.orders_info",
                "columns": [
                    "ORDERNO",
                    "QUANTITY_ORDERED",
                    "PRICE_EACH",
                    "SALES_PRICE",
                    "ORDERDATE",
                    "STATUS"
                ],
                "idx": 1
            },
            {
                "scenario_name": "data_validation",
                "scenario_source_query": "SELECT ORDERNUMBER, QUANTITYORDERED, PRICEEACH, ORDERLINENUMBER, SALES, FORMAT(ORDERDATE, 'MM-DD'), CASE WHEN STATUS IS NULL THEN 1 ELSE 2 END, QTR_ID, MONTH_ID, YEAR_ID, PRODUCTLINE, MSRP, PRODUCTCODE, CUSTOMERNAME, PHONE, ADDRESSLINE1, ADDRESSLINE2, CITY, IF(STATE IS NULL, 'US', STATE), POSTALCODE, COUNTRY, TERRITORY FROM beat2020.orders",
                "scenario_target_query": "SELECT ORDERNO, QUANTITY_ORDERED, PRICE_EACH, ORDERLINENO, SALES_PRICE, ORDERDATE, STATUS, QTR_ID, MONTH_ID, YEAR_ID, PRODUCTLINE, MSRP, PRODUCTCODE, CUSTOMERNAME, PHONE, ADDRESSLINE1, ADDRESSLINE2, CITY, STATE, POSTALCODE, COUNTRY, TERRITORY FROM beat2020.orders_info",
                "columns": [
                    "ORDERNUMBER",
                    "QUANTITYORDERED",
                    "PRICEEACH",
                    "ORDERLINENUMBER",
                    "SALES",
                    "ORDERDATE",
                    "STATUS",
                    "QTR_ID",
                    "MONTH_ID",
                    "YEAR_ID",
                    "PRODUCTLINE",
                    "MSRP",
                    "PRODUCTCODE",
                    "CUSTOMERNAME",
                    "PHONE",
                    "ADDRESSLINE1",
                    "ADDRESSLINE2",
                    "CITY",
                    "STATE",
                    "POSTALCODE",
                    "COUNTRY",
                    "TERRITORY"
                ],
                "src_lvl_key": [
                    "ORDERNUMBER"
                ],
                "tgt_lvl_key": [
                    "ORDERNO"
                ],
                "idx": 2
            },
            {
                "scenario_name": "data_rule",
                "scenario_target_query": "SELECT * FROM beat2020.orders_info",
                "passwhen": {
                    "ORDERDATE": "DATE MM-DD",
                    "STATUS": "IN 1,2",
                    "STATE": "IN US"
                },
                "idx": 3
            }
        ]
    }
}