Returning a list from the backend. I assigned this list to context. Then I want to move the returned list to a ready component.

payment.js

   const { paymentInfoData, setPaymentInfoData } = useContext(PaymentInfoDataContext);

  const req = {
    policyNumber: '1258128722',
    renewalNumber: '00',
    policyTypeExtCode: '718',
    productTypeExtCode: '1000032'
  };

  useEffect(() => {
    if (props.location.state.policy.isActive === true && Object.keys(paymentInfoData).length === 0) {
      PolicyService.getAsosInstallments(req).subscribe(
        (response) => {
          setPaymentInfoData(response);
          // console.log(response);
        }
      );
    }
  }, []);

payment.html

<TabPanel value={value} index={0} >
  <EnhancedTable variant="edit" paymentList={paymentInfoData}/>
  <div className="policypaymentinfo__button_container">
    <AS.Button variant="outlined" onClick={handlePayment}>
      Devam
    </AS.Button>
  </div>
</TabPanel>

table.js

function createData(date, price) {
  return { date, price };
}

const rows = [
  createData('03/04/2021', '250 USD'),
];

How do I move the data inside the row? I can see the props in the console.