Handling lightning-input in lightning web component

.html file:

<template>
    Name is:  - {fname}
    <br />
    <lightning-input type="text" value={fname} onchange={handleChange} ></lightning-input>
</template>

.js file:

/* eslint-disable no-console */
import {
   LightningElement,
   track
} from 'lwc';

export default class webcomp4 extends LightningElement {
   @track fname = "Farukh Haider";
   handleChange(event) {
       this.fname = event.target.value;
       console.log('Name change ' + this.fname);
   }

}

.xml file

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="webcomp4">

    <apiVersion>46.0</apiVersion>

    <isExposed>true</isExposed>

</LightningComponentBundle>

Output: