Input field value not recognizable when updated with DOM manipulation

I am trying change input field values in big-commerce checkout page. When I try to change the value of the field using jquery, the value is successfully updated on the UI. But when I try to go to the next section, It says that the field is required.

So the problem is that, when I type something manually into the field, that's the only way the page allows me go to the next step, but If I change the value with DOM manipulation. It does not somehow recognize it.

The checkout is a just an embedded React app. The checkout state is managed by React. Changing a value with JavaScript does not update the React state.

In order to update values in the checkout, you will need to use the storefront Checkouts API, and then trigger a page refresh. https://developer.bigcommerce.com/api-reference/68accc5f14783-update-a-consignment