Javascript 显示参数为空的Canva按钮

我正在使用Canva api将Canva按钮集成到React应用程序中。每次单击触发createDesign（）的按钮时

这是我用来加载Canva Api和初始化Api的代码

var api = useRef();
    useEffect(() => {
        (function (document, url) {
            var script = document.createElement('script');
            script.src = url;
            script.onload = async function () {
                // API initialization
                if (window.Canva && window.Canva.DesignButton) {
                    api.current = await window.Canva.DesignButton.initialize({
                        apiKey: 'CRlrDdpXWqeFX9ZtCOj7lS-z',
                    });
                    console.log(api.current);
                }
            };
            document.body.appendChild(script);
        })(document, 'https://sdk.canva.com/designbutton/v2/api.js');
    }, [summary]);

这里是Canva按钮，onclick调用canvaClick（打开模式）

我不知道为什么我一次又一次地犯这个错误。谢谢你阅读这篇文章

       <Button onClick={canvaClick} id='canva-btn'>
            <span>
                <img src={canva} alt='canva' />
            </span>
            Design with Canva
        </Button>

const canvaClick = () => {
    console.log('btn clicked');
    api.current.createDesign({
        design: {
            type: 'Poster',
        },
        onDesignOpen: ({ designId }) => {
            // Triggered when editor finishes loading and opens a new design.
            // You can save designId for future use.
            console.log('onDesginopen');
        },
        onDesignPublish: ({ exportUrl, designId }) => {
            console.log('onDesignPublish');
            console.log(exportUrl);
        },
        onDesignClose: () => {
            // Triggered when editor is closed.
            console.log('closed');
        },
    });
};