Call function after refetchQueries

I am receiving data from an api call, taking that data and restructuring it to properly display in a table. When a user clicks a button I am trying to create a copy of that record. I've got it all working, its just not updating the table with the appended, or removed (for delete) data. until after i refresh the page through the browser.

Is it possible to call a function after refetchQueries?

const {
    loading: appLoading,
    data: applicationsData,
    refetch: refetchApplicationsData,
} = useQuery(applications.operations.GET_APPLICATIONS_BY_COMPANY, {
    client: applications.client,
    variables: { companyId: userDetails.companyId },
})

const [
    CloneApplication,
    { loading: cloneLoading, data: cloneData, error: cloneError },
] = useMutation(applications.operations.CLONE_APPLICATION_BY_COMPANY, {
    client: applications.client,
    onCompleted: () => {
        refetchApplicationsData
    },
})

useEffect(() => {
    if (applicationsData && templatesList) {
        const newFinalData = getFinalData({
            applicationsList: applicationsData.getApplicationsByCompany,
            templatesList: templatesList,
        })
        console.log('oldFinalData: ', finalData)
        console.log('newFinalData: ', newFinalData)

        setFinalData(newFinalData)
        console.log('updatedFinalData: ', finalData)
    }
}, [applicationsData, templatesList])

const cloneAndRefresh = (applicationId, companyId, ucId) => {
    CloneApplication({
        variables: {
            applicationId: applicationId,
            companyId: companyId,
            ucId: ucId,
        },
    }).then(({ data: responseData }) => {
        if (responseData) {
            console.log('response data: ', responseData)
            console.log('applications: ', applicationsData)
        }
    })
}

the function to restructure data:

export function getFinalData(request: {
    templatesList: GetAllTemplate[]
    applicationsList: GetApplicationsByCompany[]
}): FinalDataResponse[] {
    const templates = request.templatesList.map((template) => {
        const applicationsForTemplate = request.applicationsList.filter(
            (app) => app.templateId === template.templateId
        )
        return { ...template, applications: applicationsForTemplate }
    })
    const groupedData = _.chain(templates)
        .groupBy('templateId')
        .map((value, key) => {
            const templateName = _.chain(value)
                .groupBy('templateName')
                .map((value, key) => key)
                .value()

            const createdDate = _.chain(value)
                .groupBy('dateCreated')
                .map((value, key) => dayjs(key).format('ll'))
                .value()

            const lastModified = _.chain(value)
                .groupBy('lastModified')
                .map((value, key) => dayjs(key).format('ll'))
                .value()

            return {
                templateId: key,
                templateName: templateName[0],
                createdDate: createdDate[0],
                lastModified: lastModified[0],
                applications: value[0].applications,
            }
        })
        .value()

    const finalData = groupedData.map((object, index) => {
        return {
            ...object,
            totalApplications: object.applications.length,
        }
    })
    console.log('returning final data: ', finalData)
    return finalData
}

I guess im trying to rerun getFinalData after the refetchquery then save it to state and it should re-render the table?

EDIT: I've updated my queries with new code, though it didnt quite work. If its possible to get the data from the refetched query I think i could make it work. I assume that refetching the query would update applicationsData as a result but i dont think it did?