Parent record data is not displayed in LWC data table [duplicate]

Question

Following is my code and contact's first and last name is not displayed:

HTML:

<template>
    <lightning-card title="Datatable Example" icon-name="custom:custom63">

        <div class="slds-m-around_medium">
            <template if:true={contact.data}>
                <lightning-datatable
                    key-field="Id"
                    record-id={recordId}
                    data={contact.data}
                    columns={columns}
                    onsave={handleSave}
                    draft-values={draftValues}>
                </lightning-datatable>
            </template>
            <template if:true={contact.error}>
                <!-- handle Apex error -->
            </template>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement, wire, track, api } from 'lwc';
import getContactList from '@salesforce/apex/ContactController1.getContactList';
const COLS = [
    { label: 'Status', fieldName: 'Status', editable: true },
    { label: 'First Name', fieldName: 'Contact.FirstName', editable: true },
    { label: 'Last Name', fieldName: 'contact.lastName', editable: true },
    { label: 'Email', fieldName: 'Email', type: 'email' }
];
export default class DatatableUpdateExample extends LightningElement {
    @track error;
    @track columns = COLS;
    @track draftValues = [];

    @api recordId;

    @api conWrapper = []; 

    @wire(getContactList, {pRecId: '$recordId'})
    contact;
}

Controller:

public with sharing class ContactController1 {
    @AuraEnabled(cacheable=true)
    public static List<campaignmember> getContactList(string pRecId) {
        return [select id, contactid, Status, contact.firstname, contact.lastname, Email from campaignmember where Campaignid =: pRecId];
}