Sorting in LWC Datatable Salesforce

public with sharing class DataController {
    @AuraEnabled (cacheable=true)
    public static List<Account> retrieveAccounts(){
        return [SELECT Id, Name, Type, BillingCountry
                FROM Account
                LIMIT 2000];
    }
}

<template>
    <lightning-card title="Sorting in LWC Datatable Salesforce" icon-name="custom:custom63">
        <div class="slds-m-around_medium">
            <p class="slds-p-horizontal_medium">Display records By Sorting </p>
            <br></br>
            <div style="height: 180px;">
                <lightning-datatable 
                    key-field="id"
                    data={items}
                    columns={columns}
                    hide-checkbox-column="true"
                    show-row-number-column="true"
                    onrowaction={handleRowAction}
                    default-sort-direction={defaultSortDirection}
                    sorted-direction={sortDirection}
                    sorted-by={sortedBy}
                    onsort={onHandleSort}>
                </lightning-datatable>
            </div>
        </div>
    </lightning-card>
</template>

import { LightningElement, wire } from 'lwc';
import retrieveAccounts from '@salesforce/apex/DataController.retrieveAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
const actions = [
    { label: 'View', name: 'view' },
    { label: 'Edit', name: 'edit' },
];

const columns = [
    { label: 'Id', fieldName: 'Id' }, 
    { label: 'Name', fieldName: 'Name', sortable: true  },
    { label: 'Type', fieldName: 'Type', sortable: true  },
    { label: 'BillingCountry', fieldName: 'BillingCountry', sortable: true  },  
    {   label: 'Action',
        type: 'action',
        typeAttributes: { rowActions: actions },
    },     
];

export default class SortingLWCTechdicer extends NavigationMixin(LightningElement)  {
    sortedBy;
    defaultSortDirection = 'asc';
    sortDirection = 'asc';
    columns = columns;
    items;
    error;

    @wire(retrieveAccounts)
    wiredAccounts({ error, data }) {
        if (data) {
            this.items = data;
            this.columns = columns;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.items = undefined;
            this.showToast(this.error, 'Error', 'Error'); //show toast for error
        }
    }

    handleRowAction( event ) {

        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch ( actionName ) {
            case 'view':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            case 'edit':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }
    }

    onHandleSort(event) {
        this.sortedBy = event.detail.fieldName;
        this.sortDirection = event.detail.sortDirection;
        this.sortData(this.sortedBy, this.sortDirection);
    }

    sortData(fieldname, direction) {
        let parseData = JSON.parse(JSON.stringify(this.items));
        // Return the value stored in the field
        let keyValue = (a) => {
            return a[fieldname];
        };
        // cheking reverse direction
        let isReverse = direction === 'asc' ? 1: -1;
        // sorting data
        parseData.sort((x, y) => {
            x = keyValue(x) ? keyValue(x) : ''; // handling null values
            y = keyValue(y) ? keyValue(y) : '';
            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });
        this.items = parseData;
    } 

    showToast(message, variant, title) {
        const event = new ShowToastEvent({
            title: title,
            message: message,
            variant: variant,
            mode: 'dismissable'
        });
        this.dispatchEvent(event);
    }

    handleRowAction(event) {
        const actionName = event.detail.action.name;
        const row = event.detail.row;
        switch (actionName) {
            case 'view':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        actionName: 'view'
                    }
                });
                break;
            case 'edit':
                this[NavigationMixin.Navigate]({
                    type: 'standard__recordPage',
                    attributes: {
                        recordId: row.Id,
                        objectApiName: 'Account',
                        actionName: 'edit'
                    }
                });
                break;
            default:
        }

    }
}

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>51.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__RecordPage</target>
		<target>lightning__HomePage</target>
		<target>lightning__Tab</target>
	</targets>
</LightningComponentBundle>