title: Set state on nested state array -> Error with Uncaught (in promise) TypeError: Cannot read properties of undefined
body: <p>I have a useState storing a the banking object, and after a mutation I need to add the new report onto the nested reports state. I keep getting the error &quot;TypeError: Cannot read properties of undefined (reading 'reports')&quot;</p>
  <p>However I am sure this is not undefined as I can see the data returning in the correct format. How am I setting the state incorrectly?</p>
  <p>Thanks a lot</p>
  <pre><code>type BankingObject = {
      reports: BankingReports[];
      loading: boolean;
  }
  
  const [bankingObject, setbankingObject] = useState&lt;BankingObject&gt;()
  
  const newReport = useCallback(async() =&gt; {
          const { data } = await createBankingReport({ account_id })
  
          setbankingObject({
              ...bankingObject,
              // reports: bankingObject.reports.concat(data.newBankingReport),
              reports: [...bankingObject.reports, data.newBankingReport],
          })
      }, [])
  </code></pre>