RevenueCat display price

I have the following code:

function Paywall({ onPress }) {

const getPrice = async () => {
    try {
        const offerings = await Purchases.getOfferings();
        if (offerings.current !== null && offerings.current.availablePackages.length !== 0) {
            console.log("OFFERING");
            console.log(offerings.current.monthly);
        }
    } catch (e) {
        console.log(e);
    }

    return offerings
}

useEffect(() => {
    getPrice()
})

return (
    <View style={styles.container}>
        <View style={styles.priceContainer}>
            <Text style={styles.headerText}>£9.99</Text>
            <Text style={styles.perMonthText}>per month</Text>
        </View>
        <View style={styles.buttonContainer}>
            <TouchableOpacity style={styles.button} onPress={onPress}>
                <Text style={styles.buttonText}>Subscribe for £9.99 / month</Text>
            </TouchableOpacity>
        </View>
    </View>
  );
}

My log is bringing back:

{"identifier": "$rc_monthly", "offeringIdentifier": "sale", "packageType": "MONTHLY", "product": {"currency_code": "GBP", "description": "All Access", "discounts": null, "identifier": "app_499_1m", "introPrice": {"cycles": null, "period": null, "periodNumberOfUnits": null, "periodUnit": null, "price": null, "priceString": null}, "intro_price": null, "intro_price_cycles": null, "intro_price_period": null, "intro_price_period_number_of_units": null, "intro_price_period_unit": null, "intro_price_string": null, "price": 11.99, "price_string": "£11.99", "title": "All Access (App NAME)"}}

How can I display the price_string in my <Text>

<Text style={styles.headerText}>£9.99</Text>

You have to make sure it is defined and then access the key:

<Text style={styles.headerText}>{offerings?.current?.monthly?.product?.price_string}</Text>