title: Synchronizing nested array within an object in useState hook
body: <p>I have defined a useState object as follow:</p>
  
  <pre><code>const [groupDetails, setGroupDetails] = React.useState([
      { fullName: "", phoneNo: "", gender: "" },
    ]);
    const [state, setState] = React.useState({
      fullName: "",
      phoneNo: " ",
      email: "",
      gender: "",
      idProof: "",
      noOfPeople: "",
      bookingId: "",
      detailsOfPeople: groupDetails,
    });
  </code></pre>
  
  <p>I have done populating the nested array <strong>groupDetails</strong>, but when I do:</p>
  
  <pre><code>console.log("state object:",state);
  </code></pre>
  
  <p>The field "detailsOfPeople" that holds that array <strong>groupDetails</strong> shows nothing. But if I print "groupDetails" all values are shown.
  Within useEffect function I'm doing this:</p>
  
  <pre><code>useEffect(() =&gt; {
      setGroupDetails(groupDetails);
      setState(state);
    }, [state, groupDetails]);
  </code></pre>