如何在功能组件的ReactJS中加载第三方脚本？

Question

我有一个来自第三方付款服务Instamojo的“付款”按钮，该按钮通过脚本和标签嵌入了付款按钮。

当我转到该组件时，该按钮没有显示。但是只有当我重新加载页面时，付款按钮才会显示。我该如何解决？

我已将脚本添加到公用文件夹中的index.html中。付款按钮嵌入在DestinationPageComponent.js中，该按钮在MainComponent.js中有一条路由

Index.html

<script src="https://js.instamojo.com/v1/button.js" ></script>

MainComponent.js

<Route exact path = '/destinations/:name' component={DestinationWithName}  />

....
    const DestinationWithName = ({match}) => {
        return (
            <>

            <DestinationPage destination = {this.props.cities.filter((city) => 
            city.name === match.params.name)[0]} />
            </>
        )       
    }
....

DestinationPageComponent.js

<a href={trip1.payment_code} rel="im-checkout" data-behaviour="remote" data-style="flat" data-text="Book Now"></a>