I have a function that I use to update my UI

updateUser: async (userId, slug, avatar, coverImage) => {
    const payload = {
        ...(slug && {
            slug
        }),
        ...(description && {
            avatar
        }),
        ...(coverImage && {
            coverImage
        })
    };
    return result.user.mutationUpdate({
        variables: {
            payload,
            userId
        }
    });
},

The thing is that this function is called in different placed in the UI, some of these places are to update the avatar only, or the user slug and so on. This has led to multiple functions on the UI where we do this

const handleUserCoverUpdate = useCallback(async (userId, coverImage) => {
    try {
        await user.updateChannel(userId, null, null, coverImage);
    } catch {
        //
    }
}, []);

const handleUserSlugUpdate = useCallback(async (userId, slug) => {
    try {
        await user.updateChannel(userId, slug, null, null);
    } catch {
        //
    }
}, []);

Meaning we pass parameters as whatever we need and the others as null, I feel this is getting a bit out of hand, would a better way be to pass a payload object and destructure it to get what is being send? If so how would that look with my current implementation, or is there a better way?