[Bug Report][3.9.7] Selection is not functioning correctly in the group-header slot of the Data Table component. #22014

<template>
  <v-data-table
    v-model="selected"
    :group-by="groupBy"
    :items="items"
    item-value="name"
    show-select
  >
    <template #group-header="{item, isSelected, toggleGroup, toggleSelect}">
      <tr>
        <td colspan="10">
          <div
            class="d-flex align-center"
            :style="{paddingLeft: `${item.depth * 16}px`} "
          >
            <v-checkbox-btn
              :model-value="isSelected(item)"
              @click="toggleSelect(!isSelected(item))"
              style="flex: 0 auto"
            />
            <span>{{item.value}}</span>
            &nbsp;
            <v-btn
              density="compact"
              variant="flat"
              @click="toggleGroup(item)"
              color="primary"
              >toggle</v-btn
            >
          </div>
        </td>
      </tr>
    </template>
  </v-data-table>
</template>

<script>
  export default {
    data () {
      return {
        selected: [],
        groupBy: [
          { key: 'name', order: 'asc' },
          { key: 'location', order: 'asc' },
        ],
        items: [
          {
            name: '🍎 Apple',
            location: 'Washington',
            height: '0.1',
            base: '0.07',
            volume: '0.0001',
          },
          {
            name: '🍌 Banana',
            location: 'Ecuador',
            height: '0.2',
            base: '0.05',
            volume: '0.0002',
          },
          {
            name: '🍇 Grapes',
            location: 'Italy',
            height: '0.02',
            base: '0.02',
            volume: '0.00001',
          },
          {
            name: '🍉 Watermelon',
            location: 'China',
            height: '0.4',
            base: '0.3',
            volume: '0.03',
          },
          {
            name: '🍍 Pineapple',
            location: 'Thailand',
            height: '0.3',
            base: '0.2',
            volume: '0.005',
          },
          {
            name: '🍒 Cherries',
            location: 'Turkey',
            height: '0.02',
            base: '0.02',
            volume: '0.00001',
          },
          {
            name: '🥭 Mango',
            location: 'India',
            height: '0.15',
            base: '0.1',
            volume: '0.0005',
          },
          {
            name: '🍓 Strawberry',
            location: 'USA',
            height: '0.03',
            base: '0.03',
            volume: '0.00002',
          },
          {
            name: '🍑 Peach',
            location: 'China',
            height: '0.09',
            base: '0.08',
            volume: '0.0004',
          },
          {
            name: '🥝 Kiwi',
            location: 'New Zealand',
            height: '0.05',
            base: '0.05',
            volume: '0.0001',
          },
        ],
      }
    },
  }
</script>