I am trying to change the value of a text field.

Code of text field:

<div class="StyledInputLabelWrapper-sc-1lelz3z-0 bORxnu">
<label color="#ff0000" font-size="sm" for="shipping_lastname" id="shipping_lastname-label" 
class="StyledInfoTypo-sc-1jga2g7-0 hYfxVN StyledLabel-sc-1lelz3z-1 fVraJv">Nachname</label>
<input autocomplete="shipping family-name" name="shipping_lastname" maxlength="50" 
id="shipping_lastname" placeholder="" type="text" aria-invalid="true" aria-required="false" 
data-test="shipping_lastname" class="StyledInput-sc-6brnnh-1 gAQsdK" value=""></div>

And the code of the event:

function(e, t, n, r) {
  De || Ne();
  var o = Zt,
    i = De;
  De = !0;
  try {
    Ie(o, e, t, n, r)
  } finally {
    (De = i) || Ue()
  }
}

I tried to change the value via Javascript with:

document.queryselector('#shipping_firstname-label').value = "myValue";

But whenever I move my mouse, the value in the text field will automatically set back to the previous value.

Any tips/ideas on how I can fix this?

Let me know if you need more infos. Thanks!