Async/await function is not working as expected - reactjs

Question

I'm new to using async/await and from my understanding, I can declare the function as an asynchronous function and then use await inside of that function.
What I would like for my code to do is to run document.getElementById('PrePayeezyForm').submit() only after the updateNewInvoice function has completed. UpdateNewInvoice function is setting data to my Redux store and I have a form that is referring to the data from the store.
The issue is, the last line is running so quickly that the form is referring to empty data in the store before it is set. If I use a setTimeout, it works but I don't want to have to do that. Thanks for the help.
import styles from './styles.module.scss'
const FormPayeezy = ({
payeezyArray,
removeInvoiceModal,
updateNewInvoice,
updatePO,
customer
}) => {
async function updateNewInvoices(event) {
event.preventDefault()
//save amount to redux and generate form values
let amount = event.target.x_amount.value
let customer = event.target.customer.value
await updateNewInvoice(amount, customer)
document.getElementById('PrePayeezyForm').submit();
}
function updatePOs(event) {
//save PO to redux
updatePO(event.target.value)
}
function hideModal(event) {
event.preventDefault()
removeInvoiceModal()
}
return (
<form id="PrePayeezyForm" className={styles.addInvoiceForm} method="post" action="https://demo.globalgatewaye4.firstdata.com/payment" onSubmit={updateNewInvoices}>
<input name="x_login" value={payeezyArray.login} type="hidden" />
<input name="x_invoice_num" value={payeezyArray.payment_num} type="hidden" />
<input name="x_fp_sequence" value={payeezyArray.sequence} type="hidden" />
<input name="x_fp_timestamp" value={payeezyArray.timestamp} type="hidden" />
<input name="x_fp_hash" value={payeezyArray.hash} type="hidden" />
<input name="x_show_form" value="PAYMENT_FORM" type="hidden" />
<input name="x_relay_response" value="TRUE" type="hidden" />
<label>Payment Description</label>
<input type="text" required name="loadNum" id="loadNum" onBlur={updatePOs} />
<label>Payment Amount</label>
<input type="text" required name="x_amount" id="x_amount" />
<input required name="customer" id="customer" value={customer} type="hidden" />
{payeezyArray.items}
<button className={styles.buttonAdd} type="submit"
>Pay Invoice</button>
<button className={styles.buttonCancel}
onClick={hideModal}
>Cancel</button>
</form>
)
}
export default FormPayeezy
//////////////////////////////////////////
updateNewInvoice = async (amount, customerid) => {
const { updatePayeezyCustomer, updatePayeezyAmount } = this.props
updatePayeezyAmount(amount)
updatePayeezyCustomer(customerid)
let loadid = this.props.payeezyArray.PO
let note = `New Invoice for PO #: ${loadid}`
let paymentInfo = {
'other': [
{
customerid,
note,
amount: Number(amount)
}
]
}
this.props.getPaymentResponse(paymentInfo, (id) => {
this.props.updatePayeezyPaymentNum(id)
})
let timestamp = Math.floor(Date.now() / 1000)
this.props.updatePayeezyTimestamp(timestamp)
let hash = createPayeezyHash(this.props.payeezyArray, timestamp, amount)
this.props.updatePayeezyHash(hash)
let value = `${this.props.payeezyArray.PO}<|><|>PO ${this.props.payeezyArray.PO}<|>1<|>${amount}<|>N`
let content = <input name="x_line_item" value={value} type="hidden"></input>
this.props.updatePayeezyItems(content)
}