Issue with SelectedRecord Value Not Setting Properly on Double-Click in Vue Form Page

I am currently working on a Vue.js project, but as a beginner, I am facing some issues. Specifically, I am having trouble with a value not being set correctly on a double-click event or edit button click.

I can share my code as an image for reference, which includes the following parts:

<template>
  <div class="contents">
    <!-- Add Form -->
    <EmployeeForm v-if="isAdd" @success="handleSuccess" @cancel="() => (isAdd = false)" :isEdit="false" />
    <!-- Edit Form -->
    <EmployeeForm v-if="isEdit" :record="selectedRecord" @cancel="() => (isEdit = false)" @success="handleEditSuccess"
      :isEdit="true" />

    <div class="content">
      <div class="maintitle_area">
        <h1>Employers</h1>
        <div v-if="totalRecords > 0" class="count">{{ records.length }}</div>
        <div class="vertical_divider ml-3"></div>
        <AForm layout="inline" ref="searchForm" @submit.prevent="onSearch" class="d-flex ml-3 align-items-center">
          <AFormItem label="Employer Name" name="EName" style="width: 150px">
            <AInput v-model="search" @input="handleSearchInput" />
          </AFormItem>

          <div class="d-flex mt-3">
            <AButton htmlType="submit" type="primary" class="save_btn btn_round bold" size="small"> GO </AButton>
            <AButton type="primary" class="ml-2 cancel_btn btn_round bold" size="small" @click="onClear"> Clear
            </AButton>
          </div>
        </AForm>
        <div class="flex-grow-1"></div>
        <div class="d-flex">
          <AButton type="link" title="Add" @click="onAdd">
            <PlusCircleOutlined />
          </AButton>
          <AButton type="link" title="Edit" :disabled="Object.keys(selectedRecord).length === 0" @click="onEdit">
            <EditOutlined />
          </AButton>
        </div>
      </div>
      <Spin :spinning="loading">
        <Table :columns="columns" :dataSource="records" :pagination="false" :rowClassName="getRowClassName"
          @rowClick="onRowClick" @change="onTableChange" :customRow="customRow" />
      </Spin>
      <Pagination v-if="!loading && records" :total="totalRecords" :current="pagination.pageNumber"
        :pageSize="pagination.pageCount" :pageSizeOptions="['30', '50', '100']" :showTotal="showPaginationTotal"
        @change="onPageChange" @showSizeChange="onPageChange" />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import * as workAPI from "@/APIservices/MainMenusServices";
import { Table, Button as AButton, Form as AForm, FormItem as AFormItem, Input as AInput, Spin, Pagination, message } from "ant-design-vue";
import EmployeeForm from "./compnents/EmployerForm.vue";
import { PlusCircleOutlined, EditOutlined } from "@ant-design/icons-vue";
import { nextTick } from "vue";

export default defineComponent({
  name: "EmployerIndex",
  components: { Table, AButton, AForm, Spin, AFormItem, AInput, Pagination, PlusCircleOutlined, EditOutlined, EmployeeForm, },
  setup() {
    const records = ref<any[]>([]);
    const loading = ref(false);
    const selectedRecord = ref<any>({});
    const search = ref("");
    const isAdd = ref(false);
    const isEdit = ref(false);
    const totalRecords = ref(0);
    const pagination = ref({
      pageNumber: 1,
      pageCount: 50,
      sortColumn: "EmployerName",
      sortOrder: "asc",
    });

    const columns = [
      { title: "Employer Name", dataIndex: "EmployerName", key: "EmployerName", sorter: true, width: 150 },
      { title: "Address", dataIndex: "Address", key: "Address", sorter: true, width: 150 },
      { title: "City", dataIndex: "City", key: "City", sorter: true, width: 150 },
      { title: "State", dataIndex: "State", key: "State", sorter: true, width: 150 },
      { title: "ZipCode", dataIndex: "ZipCode", key: "ZipCode", sorter: true, width: 150 },
    ];

    const handleSearchInput = (event: Event) => {
      search.value = (event.target as HTMLInputElement).value;
    };

    const loadData = async () => {
      loading.value = true;
      try {
        const data = {
          EmployerName: search.value || "",
          ...pagination.value,
        };
        const response = await workAPI.GetFilteredEmployersP(data);
        records.value = response.data.EmployeesList;
        totalRecords.value = response.data.TotalRecords;
      } catch (err) {
        message.error("Error occurred while loading data");
      } finally {
        loading.value = false;
      }
    };

    const onSearch = async () => {
      await nextTick();
      pagination.value.pageNumber = 1;
      loadData();
    };

    const onClear = () => {
      search.value = ""; // Clear the search value
      nextTick(() => {
        const input = document.querySelector(".ant-input") as HTMLInputElement;
        if (input) input.value = "";
      });
      records.value = [];
      selectedRecord.value = {};
      isAdd.value = false;
      isEdit.value = false;
    };

    const onAdd = () => {
      isAdd.value = true;
      isEdit.value = false;
      selectedRecord.value = {};
    };

    const onEdit = () => {
      isAdd.value = false;
      isEdit.value = true;
    };

    const onRowClick = (record: any) => {
      selectedRecord.value = { ...record };
    };

    const onTableChange = (paginationData: any, filters: any, sorter: any) => {
      pagination.value.sortColumn = sorter.columnKey || "EmployerName";
      pagination.value.sortOrder = sorter.order === "ascend" ? "asc" : "desc";
      loadData();
    };

    const onPageChange = (page: number, pageSize: number) => {
      pagination.value.pageNumber = page;
      pagination.value.pageCount = pageSize;
      loadData();
    };

    const handleSuccess = () => {
      isAdd.value = false;
      loadData();
    };

    const handleEditSuccess = (values: any) => {
      Object.assign(selectedRecord.value, values);
      isEdit.value = false;
      selectedRecord.value = {};
      loadData();
    };

    const customRow = (record: any) => ({
      onClick: (event: MouseEvent) => {
        event.stopPropagation();
        console.log("Row clicked:", record);
        selectedRecord.value = record;
      },
      onDblclick: (event: MouseEvent) => {
        event.stopPropagation();
        selectedRecord.value = record;
        isEdit.value = true; // Open edit form on double-click
        isAdd.value = false;
      },
    });
    const getRowClassName = (record: any) => record === selectedRecord.value ? "SelectedRow" : "";

    const showPaginationTotal = (total: number, range: [number, number]) => `${range[0]} to ${range[1]} of ${total} Employers`;

    return {
      records,
      loading,
      selectedRecord,
      search,
      isAdd,
      isEdit,
      totalRecords,
      pagination,
      loadData,
      onSearch,
      onClear,
      onAdd,
      onEdit,
      customRow,
      onRowClick,
      onTableChange,
      onPageChange,
      handleSuccess,
      handleEditSuccess,
      getRowClassName,
      showPaginationTotal,
      columns,
      handleSearchInput,
    };
  },
});
</script>

These are the code snippets I tried. Could someone please help me resolve this issue?