ReactJS: In App Purchase using in-app-purchase-2 not working - ios

Question

I have:
import { InAppPurchase2 as iap, IAPProduct } from "#ionic-native/in-app-purchase-2";
import { isPlatform } from '#ionic/react';
const IOS: React.FC = () => {
let history = useHistory();
const [productPrice, setPrice] = useState('')
const [productPriceA, setPriceA] = useState('')
const [product, setProduct] = useState([])
const [productA, setProductA] = useState([])
iap.validator = "https://validator.fovea.cc/v1/validate?###";
//initiate initInAppPurchase function
useEffect(() => {
const init = async () => {
await initInAppPurchase();
}
init();
}, []);
//if on an ios or android device, then get product info
const initInAppPurchase = () => {
if ((isPlatform('ios')) || (isPlatform('android'))) {
iap.verbosity = iap.DEBUG;
iap.register([
{
id: "tpmonthly",
alias: "Monthly",
type: iap.PAID_SUBSCRIPTION
}, {
id: "tpannual",
alias: "Annual",
type: iap.PAID_SUBSCRIPTION
},
]);
iap.ready(() => {
let product = iap.get('Monthly');
let productA = iap.get('Annual');
setPrice(product.price)
setProduct(product)
setPriceA(productA.price)
setProductA(productA)
})
iap.refresh();
}
}
//if user clicks purchase button
const purchaseProduct = () => {
if (product.owned) {
alert('A subscription is currently active.')
} else {
iap.order("tpmonthly").then(() => {
iap.when("tpmonthly").approved((p: IAPProduct) => {
p.verify();
p.finish();
});
history.push("/ios-signup/");
})
}
p.refresh();
}
//if user clicks purchase button
const purchaseProductA = () => {
if (product.owned) {
alert('A subscription is currently active.')
} else {
iap.order("tpannual").then(() => {
iap.when("tpannual").approved((p: IAPProduct) => {
p.verify();
p.finish();
});
history.push("/ios-signup/");
})
}
p.refresh();
}
return (
<>
<div className="wrapper" style={{ textAlign: 'center' }}>
<br/><br/>
<Button size="large" style={{ backgroundColor: '#202020', color: '#fff', width: '100%' }} variant="contained" onClick={purchaseProduct}>Subscribe Monthly for {productPrice}</Button><br/><br/>
<Button size="large" style={{ backgroundColor: '#202020', color: '#fff', width: '100%' }} variant="contained" onClick={purchaseProductA}>Subscribe Annually for {productPriceA}</Button><br/><br/>
</div>
</>
);
};
It displays the price of each subscription in the Button and when clicking asks me for my Apple login - but after completing this I get an error in Xcode with :
[store.js] ERROR: ios -> ERROR 6777010: An unknown error occurred - {"productId":"tpmonthly"}
Followed by:
[store.js] state: tpmonthly -> valid
So the subscription does not go through and does not show up in fovea.
Am pulling my hair out - is there anything I can do?