Able to Modilfy @API in compone.js in Lightning Web Component

Question

As per documentation at https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.js_props_public which states

A component that declares a public property can set only its default value. A parent component that uses the component in its markup can set the component’s public property value. In our example, the c-todo-item component can’t update the value of the itemName property in the todoItem.js file

However, I was able to do so. Code below. Can you please suggest what am I doing wrong.

HTML

<template>

    <lightning-card>
    <div class="slds-p-around_medium">
        <lightning-input value={nameDisplay} onchange={updateName}></lightning-input>
        <p>Your name is  {nameDisplay}</p>
    </div>
    </lightning-card>

</template>


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

export default class FirstLWC extends LightningElement {
    @api nameDisplay='Hello World';
    //nameDisplay='hi';
    updateName(e){
        console.log(e.target.value);
        this.nameDisplay=e.target.value;
    }

}