Form validation triggers after required prop is set to false

After setting the required prop to false using $( '#field' ).prop( 'required', false );, form.checkValidity() still returns false on the field and form.reportValidity() tries to focus on the element.

An invalid form control with name='' is not focusable.

The element of input type date does not have a name and is hidden, while other elements of type select do not seem to have this issue.

Full error message (name attribute added):

An invalid form control with name='' is not focusable.
<input id="ipt-arrival-date" name="arrival" type="date" onfocus="this.showPicker()" min="2024-09-04" max="2024-09-08" class="">

From the error it shows that the required prop is not there at the time the error shows.

The form is too large to post the complete code.

Any ideas?