React -accessing properties of an object which is itself retrieved using a dynamic key of an outer object

I am having a problem accessing a property of an object which itself is a property of another object. I have reviewed the answers on here and researched the issue, but have not found an answer.

In brief, I have an object, data, that has a dynamic key that is a variable policyNumber, the value of which is an object. That object has a key loanFinancialInformation, the value of which is an object. I have data[policyNumber] saved as policyLoanDetails, and it shows the LoanFinanicalInformation object in the console.log. But when I do policyLoanDetails.loanFinancialInformation, or policyLoanDetails[loanFinancialInformation], or policyLoanDetails[‘loanFinancialInformation], I get TypeError: Cannot read properties of undefined (reading ‘loanFinancialInformation’)

This is a React project. First, I have a model component called PolcyLoanModel. It is pretty long, so I am trimming out some of the properties. The model is as follows:

export interface PolcyLoanModel {
    success: boolean;
    loanFinancialInformation: LoanFinancialInformation;
}

export interface LoanFinancialInformation {
    grossCashValue: GrossCashValue;
    maximumLoanInterest: MaximumLoanInterest;
    loanInterestRate: LoanInterestRate;
    loanInterestRateType: string;
    loanInterestRateDesc: LoanInterestRateDesc;
    loanPayoffDate: string;
}

export interface GrossCashValue {
    amount: number;
    currencyCode: string;
}

export interface MaximumLoanInterest {
    amount: number;
    currencyCode: string;
}

export interface LoanInterestRate {
    amount: number;
    currencyCode: string;
}

export interface LoanInterestRateDesc {
    code: string;
    shortName: string;
    longName: string;
    codeText: string;
}

Next I have a component called Policy. In that component, I do a callout for the loan information. The callout works fine, so I won’t post it here. I store the callout response in a variable called policyLoanDetails. This component also has the policy number I’m working with. That part is working fine also. I then have in my component return a component called LoanInfo. The line for the LoanInfo component passing the props is this:

<LoanInfo data={policyLoanDetails} policyNumber={policyNumber} />

In the LoanInfo component itself, I import the PolcyLoanModel. I then have the following code. Please note that I have trimmed out much of the code that is irrelevent due to length.

const LoanInfo = ({data, policyNumber}:{data:any, policyNumber:string}) => {
    console.log(`Loan Info component - data = ${JSON.stringify(data)}`);
    const policyLoanDetails: PolcyLoanModel = data[policyNumber];
    console.log(`policyLoanDetails - ${JSON.stringify(policyLoanDetails)}`);

For the callout, I am using a policy number which we will say is R302301 (fake for purposes of privacy). For the first console log, I get back the following:

{
    "N830000026":{
        "success": true,
        "loanFinancialInformation": {
            "grossCashValue": {
                "amount": 3021.21,
                "currencyCode": "USD"
            },
            "maximumLoanInterest": {
                "amount": 52.97,
                "currencyCode": "USD"
            },
            "loanInterestRate": {
                "amount": 7.4,
                "currencyCode": "USD"
            },
            "loanInterestRateType": "Fixed",
            "loanInterestRateDesc": {
                "code": "A",
                "shortName": "Advance",
                "longName": "Interest Billed in Advance",
                "codeText": ""
            },
            "loanPayoffDate": "2024-11-11"
        }
    }
}

For the second console.log, data[policyNumber], I get the following return:

{
    "success": true,
    "loanFinancialInformation": {
        "grossCashValue": {
            "amount": 3021.21,
            "currencyCode": "USD"
        },
        ...
        "loanPayoffDate": "2024-11-11",
    }
}

I am trying to access the properties of loanFinancialInformation in a table with the following lines of code:

const policyLoanInfo = policyLoanDetails.loanFinancialInformation;

<TableCell id="loan-info-cash-val-value">${policyLoanInfo.grossCashValue.amount} <span className="redText"><strong>(Don&apos;t Quote)</strong></span></TableCell>

The error is occurring on the line with const policyLoanInfo = . Like I said at the beginning, it occurs whether I use dot notation or bracket notation.

Any help is appreciated.