我需要创建一个自定义组件，仅获取卡信息，将其存储在stripe上，并可以在以后对其进行收费。

v3:1 Uncaught (in promise) IntegrationError: We could not retrieve data from the specified Element.
              Please make sure the Element you are attempting to use is still mounted.
    at ni (v3:1:319630)
    at e._handleMessage (v3:1:324970)
    at e._handleMessage (v3:1:146061)
    at v3:1:322539

这个错误出现了，我检查了，组件是挂载的，但总是挂载的方式，因为这是条纹的工作方式，所有的条纹组件都在不同的，给我们的应用程序带来一些额外的负载，但这是另一个主题。
我需要摆脱这个错误。
我有一个与stripe.checkout.sessions.create的路线，但是，它将用户重定向到另一个选项卡，这不是我想要的行为，我更喜欢在同一个应用程序中弹出一个窗口，并在那里存储卡数据，这就是它。
在索引中传递条带引用（用于全局访问）

import {Elements} from "@stripe/react-stripe-js";
import {loadStripe} from "@stripe/stripe-js";
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY);

...others

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <BrowserRouter>
            <Provider store={store}>
                <Elements stripe={stripePromise}>
                    <ThemeProvider>
                        <App/>
                    </ThemeProvider>
                </Elements>
            </Provider>
        </BrowserRouter>
    </React.StrictMode>
);

条带卡输入 Package 器（就像文档一样）注：在嵌套组件之前，我在一个空项目中尝试了这段代码，效果很好。

import React, {useState} from 'react';
import {CardElement} from '@stripe/react-stripe-js';
import {styled} from "@mui/material/styles";
import {Box, Stack, Typography} from "@mui/material";
import EzLoadingBtn from "../../ezComponents/EzLoadingBtn/EzLoadingBtn";

const CARD_ELEMENT_OPTIONS = {
    style: {
        base: {
            'color': '#32325d',
            'fontFamily': '"Helvetica Neue", Helvetica, sans-serif',
            'fontSmoothing': 'antialiased',
            'fontSize': '16px',
            '::placeholder': {
                color: '#aab7c4',
            },
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a',
        },
    },
};

const RootStyle = styled(Stack)(({theme}) => ({
    width: '400px',
    padding: '50px 30px 30px 30px'
}))

export default function CardInput({onSubmit}) {
    const [loading, setLoading] = useState(false);
    return (
        <RootStyle>
            <Box component='form' onSubmit={onSubmit}>
                <Stack flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}>
                    <Typography variant='span'>Card</Typography>
                </Stack>
                <CardElement options={CARD_ELEMENT_OPTIONS}/>
                <EzLoadingBtn
                    sx={{marginTop: '25px'}}
                    color="inherit"
                    size='large'
                    type='submit'
                    variant='outlined'
                    loading={loading}
                >
                    Save Card
                </EzLoadingBtn>
            </Box>
        </RootStyle>
    );
}