I am trying to highlight a table row when the edit button is clicked. When the edit button is clicked, the entire row should be highlighted. I have tried using CSS and other methods, but they are not working. Can you please help me how to go about it

<v-data-table
                :headers="headers"
                :items="state.rows"
                :search="search"
                :loading="loadingCompanyUsers"
                items-per-page-text="Rows per page:"
                :items-per-page-options="[5, 10, 15, -1]"
            >
           
                <template #loader>
                    <v-progress-linear color="primary" :indeterminate="true" />
                </template>
                <template #[`item.role`]="{ item }">
                </template>

               
                <template #[`item.removeUser`]="{ item }">
                    <span v-if="item.isRemoveable" class="w-10 flex items-center">
                        <div class="button-container">
                            <!-- Edit/Save/Cancel Buttons Container -->
                            <div class="flex">
                                <div v-if="!item.isEditing">
                                    <v-tooltip left>
                                        <!-- Edit Button -->
                                        <template #activator="{ props }">
                                            <button
                                                class="btn btn-secondary todo-edit-btn mr-2"
                                                v-bind="props"
                                                @click="toggleEditing(item, state)"
                                            >
                                                <v-icon
                                                    class="mb-2"
                                                    color="primary"
                                                    style="vertical-align: middle"
                                                    icon="mdi-pencil"
                                                />
                                            </button>
                                        </template>
                                        <span v-text="'Edit User'" />
                                    </v-tooltip>
                                </div>
 
                                <div v-else class="flex">
                                    <!-- Save Button -->

                                    />
                                    <!-- Cancel Button -->
  
                                </div>
                            </div>
 
                            <!-- Remove Button -->

                        </div>
                    </span>
                </template>
               
            </v-data-table>

I tried using but this didnt work in my case , also i want to highlight when edit is clicked not when selected

<v-data-table @click:row="rowClick" item-key="name" single-select ...

methods: {
    rowClick: function (item, row) {      
      row.select(true);
      //item.name - selected id
    }
}

<style>
  tr.v-data-table__selected {
    background: #7d92f5 !important;
  }
</style>