Unable to pass the required parameters into the URL - Laravel Inertia Vue

I am building a datatable with multi-column sorting functionality. As up to now, the sorting functionality is working fine, what I am unable to get is, right parameters into the url. As I am only passing $sorts to the component, hence I'm using this.$inertia.get to pass the $sorts back to the controller, which is returning back the sorted data. But due to passing sorts: this.sorts within the Inertia get method, its returning back the url query as http://127.0.0.1:8000/users?sorts[name]=asc. How can I get the required parameter within the Inertia get method so I get a url query as suchhttp://127.0.0.1:8000/users?sort_field=name&sort_direction=asc as well as pass the $sorts as well so it returns back the expected data.

Controller

public $sorts = [];

public function initalizeSortingRequest()
{
    $this->sorts = request()->get('sorts', $this->sorts);
}

public function applySorting($query)
{
    foreach ($this->sorts as $sort_field => $sort_direction) {
        $query->orderBy($sort_field, $sort_direction);
    }
        
    return $query;
}

Component

<script >
    methods: {
        sortBy(field) {
            if (!this.sorts[field]) {
                this.sorts[field] = 'asc';
            } else if (this.sorts[field] == 'asc') {
                this.sorts[field] = 'desc';
            } else {
                delete this.sorts[field];
            }

            let route = this.route('users.index', {
                sorts: this.sorts
            })
            this.$inertia.get(route, {}, {
                only: ['usersData'],
                preserveState: true,
                preserveScroll: true
            })
        }
    } 
</script>