JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="myInput" value="initial"/>

<p>After 10 seconds, the input value will be programmatically changed to "final".</p>

JavaScript

var myInput=document.getElementById("myInput");

// Create a clone of the original input for the users
var inputClone=myInput.cloneNode(true);
inputClone.id="fakeInput";
myInput.parentNode.insertBefore(inputClone,myInput);

// Hide the original input, it will capture value changes (programmatic or user)
myInput.style.display="none";

// Observe programmatic changes to myInput
Object.defineProperty(myInput,"value",{
    get:function(){return this.defaultValue;},
    set:function(val){
        console.log("set "+val);
        this.defaultValue=val;
        // transfer value to visible input
        inputClone.value=val;
    }
});

// Observe manual changes (the user only sees the clone
inputClone.onchange=function(){
    // transfer the value to the original input
    myInput.value=inputClone.value;
}

// example of programmatic update
setTimeout(function(){myInput.value="final";console.log(myInput.value);},10000);