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.

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)
}, [])

Am i updating the state incorrectly?