How to pass the data from parent to child in LWC

childcomponent.html
<template>
    FirstName is:{fname}<br/>
    LastName is:{lname}
 </template>
childcomponent.js
import { LightningElement,api } from 'lwc';
export default class ChildComponent extends LightningElement {
   @api fname;
   @api lname;
   @api
   displayValues(names){
       this.fname=names.FirstName;
       this.lname=names.LastName;
   }
}
parentComponent.html
<template>
   <c-child-component >
   </c-child-component>
   <lightning-input type="text" label="FirstName" class="fn">
   </lightning-input>
   <lightning-input type="text" label="LastName" class="ln">
   </lightning-input>
   <lightning-button label="Fire the event" variant="brand" onclick={handleClick}>
   </lightning-button>
</template>

parentComponent.Js
import { LightningElement,api } from 'lwc';
export default class ParentComponent extends LightningElement {
    @api firstName;
    @api lastName;
    handleClick(event){
        this.firstName=this.template.querySelector(".fn").value;
        this.lastName=this.template.querySelector(".ln").value;
        var names={
            FirstName:this.firstName,
            LastName:this.lastName
        };
        this.template.querySelector("c-child-component").displayValues(names);
    }
}
LightningApplication
<aura:application extends="force:slds">
	<c:parentComponent/>
</aura:application>