Passing Context to Popup

[jo-goburdhun]

Please refer to this post.

I have a component which uses context and it works as expected when I include it in other components. But when I try to include that same component in a SweetAlert popup, I get the error:

Cannot destructure property 'cart' of '(0 , react__WEBPACK_IMPORTED_MODULE_0__.useContext)(...)' as it is undefined.

which means the component is not getting access to the context.

So when used outside of a SweetAlert popup, the component gets access to the context but not when inside the popup.

Here's my code for firing the popup:

const productModal = withReactContent(Swal);
function showProductPopupHandler(productId) {
        ProductService.get(productId).then((response) => {
            const product = response.data;

            return productModal.fire({
                html:
                    {/*other html*/}
                    <ShoppingCartQuantity productId={product.AMP_GUID} />
                ,
                showConfirmButton: false,
                showCloseButton: true
            });
        });
    }

If I remove the component from the popup, the popup works as expected.