Based on invoice amount how to apply the payment amount by calculating the remaining amount

based on applied amount calculating the remaining amount to the invoice and showing the validation message on submit

if (shouldApplyHavingAmount && havingAmount > 0) {
                            if (editedInvoiceIds.some(id => id === doc.id)) {
                                let updateInvoice = updateInvoiceValues.find(item => item.id === doc.id);
                                if (updateInvoice) {
                                        appliedAmount = updateInvoice.amount;
                                        console.log('Test-Rohit updateInvoice.amount',updateInvoice.amount);
                                }
                            } else {
                                appliedAmount = Math.min(remainingHavingAmount, havingAmount, invoiceAmount);
                            }
                            remainingHavingAmount = Math.max(0, (remainingHavingAmount - appliedAmount)).toFixed(2);
                            appliedAmounts.push({ invoiceId,invoiceNo, appliedAmount,invoiceAmount });
                            console.log('Test-Rohit appliedAmounts',appliedAmounts);
                            const totalAppliedAmount = appliedAmounts.reduce((total, entry) => {
                                return total + parseFloat(entry.appliedAmount || 0);
                            }, 0);
                            console.log('Total Applied Amount:', totalAppliedAmount);
                            setTotalAppliedAmount(totalAppliedAmount)
                        }
<td className="px-4 py-2 "><div id={selectedInvoiceIds.includes(invoice.id) ? "amountApplied" : ""} className="h-[22px] leading-[22px] screen-md:h-auto bg-transparent text-center border-transparent outline-none" contentEditable={selectedInvoiceIds.includes(invoice.id)} onKeyPress={handleKeyPress}  onInput={(e) => invocieAmountUpdate(e,selectedInvoiceIds ,invoice.id)}>{invoice.amountApplied}</div></td>