title: React State not updating during useEffect
body: <p>I am trying to create a loading indicator that has text to go with it. To accomplish this I am attempting to load data from an API, throughout that process I am updating the loading state to reflect so. (or so i thought...). The loading state doesn't change at all throughout the useEffect running.</p>
  <pre><code>useEffect(() =&gt; {
      setLoading((prev) =&gt; ({
          ...prev,
          isLoading: true,
          text: 'Fetching customer data ...',
      }))
      console.log(loading)
      if (agreementId) {
          getCustomerData(agreementId)
              .then((response) =&gt; {
                  const { customerData } = response
  
                  if (customerData) {
                      setApiValues(customerData)
                  } else {
                      setApiValues({})
                  }
              })
              .catch((err) =&gt; {
                  console.log('error: ', err)
              })
      } else if (!agreementId) {
          setLoading((prev) =&gt; ({
              ...prev,
              text: 'Creating new customer ...',
          }))
          const customerId = v4()
          const slashSplit = location.pathname.split('/')
          if (slashSplit.length &lt;= 3) {
              navigate(`${location.pathname}/${customerId}`, {
                  replace: true,
              })
          }
      }
      setLoading((prev) =&gt; ({
          ...prev,
          text: 'Building your form ...',
      }))
      getPreAppCards(applicationId).then((response) =&gt; {
          setPreAppData(response)
      })
      setLoading({ isLoading: false, text: '' })
      console.log('loading: ', loading)
  }, [])
  </code></pre>
  <p>Am i updating the state incorrectly?</p>