I created a textarea, and set the value of the textarea to something else. However, when the user presses Ctrl+Z, the textarea does not restore the value it had before programmatically changing its value. How do I make sure that programmatically changing the value of the textarea, does not clear it’s undo history?

let test = document.getElementById('test')
function changeVal() {
   test.value += 'Hello world'
   test.focus()
}

#test {
   width: 100%;
   height: 10em;
}

<textarea id="test" placeholder="Enter some text"></textarea>
<button onclick="changeVal()">Change value</button>

Now, I know how to solve this problem only with document.execCommand('insertText' or 'delete'), but now that document.execCommand is deprecated, how can I solve this problem?