[SalesForce] LWC wire function

I want to display some value using button click. I have written a simple js and apex. I don't see any error in console but the data is not displaying. Can anyone tell me what is wrong with my code.

apex:

public with sharing class DisplayData {
    @AuraEnabled(cacheable=true)
    public static Account displayAccRec(Id recordId)
    {
        System.debug('*** arg value'+recordId);
        return [SELECT Id, Name from Account where Id = :recordId];
    }
}

JS:

import { LightningElement, wire, track } from 'lwc';
import dispAccRec from '@salesforce/apex/DisplayData.displayAccRec';

export default class DispalyData extends LightningElement {
    @track accRec;
    @track recordId;
    DisplayAccRec;
    @wire(dispAccRec,{recordId:'$recordId'}) DisplayAccRec;
    handleClick(event)
    {
        alert('You clicked the button');
        accRec = DisplayAccRec;
    }
}

HTML:

<template>
    <lightning-card title='Account Record Display'>
        <lightning-button variant="brand" label="Display Data" 
            onclick={handleClick} 
            class="slds-m-left_x-small"
            slot="actions">
        </lightning-button>
        <div class="slds-m-around_medium">
            <template if:true={accRec}>
                <template for:each={accRec.data} for:item="accountInfo">
                    <p key={accountInfo.id}>{accountInfo.Name}</p>
                </template> 
            </template>
            <template if:true={error}>
                {error}
            </template>
        </div>
    </lightning-card>
</template>

Output: