Dom manipulation: “Value is required” even though there is a value in the web form field

I am developing an autofill plugin to autofill workday form, this is part of my program:

const lastNameInput = document.querySelector('[data-automation-id="legalNameSection_lastName"]');
if (lastNameInput) {
  lastNameInput.value = 'Last Name';
  lastNameInput.setAttribute('value', 'Last Name');
  await delay(1000);
  console.log(lastNameInput);
}

<input
    type="text"
    data-automation-id="legalNameSection_lastName"
    id="input-6"
    aria-required="true"
    class="css-1p1ka2x"
    value=""
    aria-describedby="error1-input-6"
    aria-invalid="true"
/>

As shown here:

“Value is required” issue

After I autofill the value using my program, the value appears in the user interface and the HTML element.

However, when I click the “Save and Continue” button, an error pops up, indicating that the field is empty.

I need to manually click the input field to fi x it.

How to ressolve this issue