Value set for textArea is getting reverted/going empty while using script to fill form (AngelList Website)

Question

I am trying to apply for a job using js in console, but when I try to set the textArea value in the form and click submit, it doesn't work with the error being textArea empty.

Here is a gif :

In the first command I am setting the value, in second, I click the second button, but it is not working.

Steps to reproduce:

Open any job on angel.co/jobs and then click apply then this form would appear, then using javascript select the input field, and set it's value, and then click on submit button.

My commands: (classNames might be different for you)

Selecting the input field:

let eee = document.getElementsByClassName('styles_component__mqUU9 styles_component__kpbt6 styles_bordered__2C24K styles_width100__2VCHt styles_warning__3-xYH')

Setting value for input :

eee[0].value=`Hi, Nao

Submit button clicking:

document.getElementsByClassName('styles_component__3A0_k styles_primary__3xZwV styles_regular__3b1-C styles_emphasis__KRjK8 styles_component__sMuDw styles_medium__R1A06')[0].click();

I have tried: innerText, innerHtml, and adding event listener with keyboard events, but no luck. (not sure if I did keyboard events correctly or not but that didn't work.

Any help or suggestions are highly appreciated.

---

PS:

Here is how I did keyboard events (inspired by this answer on stackoverflow):

Selecting the button and adding event listener to it.

let iButton = document.getElementsByClassName('styles_component__3A0_k styles_primary__3xZwV styles_regular__3b1-C styles_emphasis__KRjK8 styles_component__sMuDw styles_medium__R1A06');

iButton[0].addEventListener('click', simulateInput);

function simulateInput() {
  var inp = document.getElementsByClassName('styles_component__mqUU9 styles_component__kpbt6 styles_bordered__2C24K styles_width100__2VCHt styles_warning__3-xYH')[0];
  var ev = new Event('input');
  
  inp.value ='hello new input';
  inp.dispatchEvent(ev);
}