How to update component in user collection Strapi v4

[details="System Information"]

• Strapi Version: 4.5.5
• Operating System: Windows
• Database: MySQL
• Node Version: 14.20
• NPM Version: 8.18.0
• Yarn Version: 1.22.19
  [/details]

Hi there, I'm trying to updata a component called "billingAddress" within my user collection. I have set up a route to be able to enable a user to update their own data based on this video: Updating Your Own User Info in Strapi - YouTube

I'm able to update user data but once I need to update data in the component I'm not able to update any data.

This is what my extension looks like on the strapi backend:

module.exports = (plugin) => {
    plugin.controllers.user.updateMe = async (ctx) => {
        if (!ctx.state.user || !ctx.state.user.id) {
            return ctx.response.status = 401;
        }
        await strapi.query('plugin::users-permissions.user').update({
            where: { id: ctx.state.user.id },
            data: ctx.request.body,
        }).then((res) => {
            ctx.response.status = 200;
        })
    }

    plugin.routes['content-api'].routes.push(
        {
            method: "PUT",
            path: "/user/me",
            handler: "user.updateMe",
            config: {
                prefix: "",
                policies: []
            }
        }
    )

    return plugin;
}

This is the Axios put request I'm using to update the user data from the frontend:

const handleUpdateBillingAddress = () => {
        axios.put('http://localhost:1337/api/user/me', {
            billingAddress: {
                zipCode: "2840",
                id: 1,
                firstName: "Tim",
                lastName: "kerrem",
                company: "mycompany",
                address1: "mystreet 42",
                address2: null,
                city: null,
                country: "Belgium",
                provinceOrState: null,
                zipCode: null,
                phone: "+31412412412",
                email: null
            }
        },

        {
            headers: {
                'authorization': `Bearer ${jwt}`,
                'Content-Type': 'application/json'
            },
            },
        )
        .then(response => {     
            console.log(response)
            notification.open({
                type: 'success',
                message: 'Success!',
                description:'Your user information has been updated',
                });
            })
        .catch(error => {
            console.log(error);
            console.log('An error occurred:', error.response);
            notification.open({
                type: 'error',
                message: 'Something went wrong',
                description:'Some of your credentials are not valid',
                });
        });
    }

Would be really helpful if someone could advise me on how to update the component

Hi you wanna try doing this via entityService strapi doc's states:

>The Entity Service API is the recommended API to interact with your application's database. The Entity Service is the layer that handles Strapi's complex data structures like components and dynamic zones, which the lower-level layers are not aware of.

reference

so try:

await strapi.entityService.update('plugin::users-permissions.user', ctx.state.user.id, {data: ctx.request.body })

By using entityService and doing some tweaking with data and populate parameters I was able to get this working with following code:

module.exports = (plugin) => {
    plugin.controllers.user.updateMe = async (ctx) => {
        if (!ctx.state.user || !ctx.state.user.id) {
            return ctx.response.status = 401;
        }
        const billingData = ctx.request.body.billingAddress;
        await strapi.entityService.update('plugin::users-permissions.user', ctx.state.user.id, {
            data: {
            billingAddress: {
                firstName: billingData.firstName,
                lastName: billingData.lastName,
                company: billingData.company,
                address1: billingData.address1,
                city: billingData.city,
                country: billingData.country,
                provinceOrState: billingData.provinceOrState,
                zipCode: billingData.zipCode,
                phone: billingData.phone,
                email: billingData.email,
            },
            },
            populate: ["billingAddress"],
        }).then((res) => {
            ctx.response.status = 200;
        })
    }

    plugin.routes['content-api'].routes.push(
        {
            method: "PUT",
            path: "/user/me",
            handler: "user.updateMe",
            config: {
                prefix: "",
                policies: []
            }
        }
    )

    return plugin;
}