Template v-slot changes v-data-table values?

Question

I am trying to display data of the row clicked in console, I am using a currencyhelpers library that is running RPC calls and getting data from it which gets displayed on my v-data-table.

To create a clickable row I am using <template v-slot:item which handles a @click even on table row click, The problem is as follows: The image below is before I add the v-slot in my v-data-table which is fine as it should be

Here is the v-data-table after I add the <template v-slot:item`

This is my entire component code (with the help of chatGPT:

<template>
  <v-layout>
    <v-row>
      <v-col>
        <h1>Currencies</h1>
        <v-container class="mx-auto pa-6">
          <v-data-table 
            :items="currencies" 
            :headers="headers" 
            dense
          >
            <template v-slot:top>
              <v-toolbar flat>
                <v-toolbar-title>Version {{ info.VRSCversion }}</v-toolbar-title>
              </v-toolbar>
            </template>
            <template v-slot:item="{ item }">
              <tr @click="handleCurrencyClick(item)">
                <td v-for="(value, key) in item" :key="key">{{ value }}</td>
              </tr>
            </template>
          </v-data-table>
          

        </v-container>
      </v-col>
    </v-row>
  </v-layout>
</template>

<script setup>
import { ref } from 'vue'
import currencyHelpers from '../lib/currencyHelpers';

const info = ref([]);
const currencies = ref([]);
const headers = [
  { title: 'Name', value: 'currencydefinition.fullyqualifiedname' },
  { title: 'ID', value: 'currencydefinition.currencyid' },
  { title: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
  { title: 'ID import fee', value: 'currencydefinition.idimportfees' },
  { title: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
  { title: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
  { title: 'Options', value: 'currencydefinition.options' }
];
const selectedCurrency = ref({});
const currencyState = ref({});

(async () => {
  info.value = await currencyHelpers.getInfo();
  currencies.value = await currencyHelpers.listCurrencies();
})();

const handleCurrencyClick = async (currency) => {
  const clickedCurrency = currency.value;
  selectedCurrency.value = clickedCurrency;
  console.log("Clicked currency:", clickedCurrency);
  try {
    if (clickedCurrency.currencydefinition) { // Check if currencydefinition exists
      const currencyDefinition = clickedCurrency.currencydefinition.fullyqualifiedname;
      // Call getCurrencyState with the appropriate currency ID or name
      currencyState.value = await currencyHelpers.getCurrencyState(currencyDefinition.fullyqualifiedname);
      console.log("Currency state:", currencyState.value);
    } else {
      console.error("Currency definition not found");
    }
  } catch (error) {
    console.error("Error fetching currency state:", error);
    currencyState.value = null; // Set currency state to null in case of error
  }
};


</script>

JSON DATA