Table display according to list from backend

There is a list from the backend. The incoming list is the invoices list. I show these invoices in 2 different tabs as paid and unpaid. "status 3" of paid invoices. "status 6" of paid invoices. Sometimes there are no outstanding invoices. In this case, I want to remove the unpaid invoices table and replace it with a notification message.

payment-info.js

Here you can see two different tabs

<TabPanel value={value} index={0} >
  <PaymentTable variant="edit" paymentList={paymentInfoData} value={value} collectionMethod={collectionMethod} />
  <div className={hiddenControlButtonClass}>
    <AS.Button variant="outlined" onClick={handlePayment}>
      Continue
    </AS.Button>
  </div>
</TabPanel>
<TabPanel value={value} index={1}>
  <PaymentTable variant="read" paymentList={paymentInfoData} value={value} />
</TabPanel>

payment-table.js

props.paymentList.policyInstallmentDtoList = item

if (props.value === 0 && item.status !== '3') { ... //unpaid bills
}

if (props.value === 0 && !props.paymentInfoData?.policyInstallmentDtoList?.some((e) => e['status'] === '6')) {
  return (
   <div>You do not have any outstanding invoices</div>
  );
} // I tried to print a message if there is no unpaid invoice by navigating the incoming list here.

if (props.value === 1 && item.status === '3') { ... //paid invoice 
}

Since there are too many lines in if blocks, I wrote it abbreviated

How do I print the message if there is no unpaid invoice?