Estoy tratando de crear un indicador de carga que tenga texto para acompañarlo. Para lograr esto, estoy intentando cargar datos desde una API, durante ese proceso estoy actualizando el estado de carga para reflejarlo. (o eso pensé...). El estado de carga no cambia en absoluto durante la ejecución de useEffect.

 useEffect(() => { setLoading((prev) => ({ ...prev, isLoading: true, text: 'Fetching customer data ...', })) console.log(loading) if (agreementId) { getCustomerData(agreementId) .then((response) => { const { customerData } = response if (customerData) { setApiValues(customerData) } else { setApiValues({}) } }) .catch((err) => { console.log('error: ', err) }) } else if (!agreementId) { setLoading((prev) => ({ ...prev, text: 'Creating new customer ...', })) const customerId = v4() const slashSplit = location.pathname.split('/') if (slashSplit.length <= 3) { navigate(`${location.pathname}/${customerId}`, { replace: true, }) } } setLoading((prev) => ({ ...prev, text: 'Building your form ...', })) getPreAppCards(applicationId).then((response) => { setPreAppData(response) }) setLoading({ isLoading: false, text: '' }) console.log('loading: ', loading) }, [])

¿Estoy actualizando el estado incorrectamente?