Product name is not displaying in my lwc datatable [duplicate]

Question

My requirement is that i need to edit opportunity line item in one page using LWC Datatable.

My apex controller class:

public with sharing class OpportunityLineItemController <br>{ <br>
    @AuraEnabled(cacheable=true)

    public static List<OpportunityLineItem> getOpportunityLineItems(String opportunityId) {

        return [SELECT Id,Product2.Name, UnitPrice,
                Quantity,Discount_Value__c,
                Discount_Type__c,GST__c 
                FROM OpportunityLineItem 
                WHERE OpportunityId = :opportunityId];

    }
}

import { LightningElement,track,wire,api} from 'lwc'; <br>
import { updateRecord, deleteRecord} from 'lightning/uiRecordApi';<br>
import { ShowToastEvent } from 'lightning/platformShowToastEvent';<br>
import { refreshApex } from '@salesforce/apex';

import getOpportunityLineItems from'@salesforce/apex/OpportunityLineItemController.getOpportunityLineItems'


const columns = [
{ label: 'Product', fieldName: 'Product2.Name', editable:true},<br>
{ label:'Quantity', fieldName:'Quantity',editable:true},<br>
{ label: 'Sales Price', fieldName: 'UnitPrice', editable:true},<br>
{ label: 'Discount Value', fieldName: 'Discount_Value__c', editable:true},<br>
{ label: 'Discount Type', fieldName: 'Discount_Type__c', editable:true},<br>
{ label: 'GST %', fieldName: '  GST__c', editable:true},

{
    
    type: "button",
    typeAttributes: {
        iconName: "utility:delete",
        name: "deleteOpportunity",
        variant: "destructive",
        iconSize: "x-small",
        class: "small-button"
    }
}

];

export default class OpportunityLineItemsEditor extends LightningElement {

@api recordId;<br>
opportunityLineData=[];<br>
columns = columns;<br>
draftValues=[];<br>
oppLineProp;

@wire(getOpportunityLineItems,{
    opportunityId:"$recordId"
}) 
   getOpportunityLine(result) <br>{
    this.oppLineProp=result;

    if(result.data)
    {
        this.opportunityLineData=result.data;

    }
    else if(result.error)
    {
        console.log('error while loading records');
    }


}

async handleSave(event)
{

    let records=event.detail.draftValues;
    let updateRecordsArray= records.map((currItem) => {
        let fieldInput = {...currItem};
        return{
            fields:fieldInput
        };

    });

    this.draftValues=[]
    let updateRecordsArrayPromise=updateRecordsArray.map((currItem) => updateRecord(currItem));

    await Promise.all(updateRecordsArrayPromise);

    const toastEvent = new ShowToastEvent({
        title: 'Success',
        message:
            'Records Updated Successfully',
            variant:'success'
    });
    console.log('Dispatching toast event...');
    this.dispatchEvent(toastEvent);
    console.log('Toast event dispatched.');

    await refreshApex(this.oppLineProp);


}

async handleRowAction(event) { <br>
    if (event.detail.action.name === "deleteOpportunity")<br> {
        deleteRecord(event.detail.row.Id).then(() => {
            
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Success',
                    message: "Record deleted successfully!",
                    variant: 'success'
                })
            );
        }).catch((error) => {
            console.log("error, " + error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error deleting record',
                    message: error.body.message,
                    variant: 'error'
                })
            );
        })
    }

    await refreshApex(this.oppLineProp);
}

}

When I attempted to deploy the source to the org and viewed the records in the data table, all fields were displayed except for the product name. What would be the workaround to resolve this?