React unmount a Paypal button - reactjs

Question

I have a Paypal button rendered with a Modal component. What is the proper way to unmount the Paypal Button without raising a clean up error?
Here is the implementation for the Dialog
<Drawer anchor="bottom" open={open} onClose={() => setStatus(false)}>
<section className={classes.innerDrawer}>
<h2 className={classes.innerDrawerTitle}>
{loading ? '' : 'Checkout'}
</h2>
<PaypalButton
...props
/>
</section>
</Drawer>
And the button
const Button = paypal.Button.driver('react', { React, ReactDOM });
return (
<Button
env={PAYPAL_ENV}
client={client}
payment={(data, actions) => payment(data, actions)}
onAuthorize={data => execute(data.payerID, data.paymentID)}
style={{
size: 'medium', // tiny, small, medium
color: 'blue', // orange, blue, silver
shape: 'rect', // pill, rect
}}
/>
);
The error message I get:
Uncaught Error: No response from window - cleaned up
I do not get this error message when the un-mount is successful, which happens when I processed with a payment.
link:
https://codesandbox.io/s/r4zvkjm2kq

Answer 1

I couldn't reproduce your issue, but I've tried to do the same code you're doing.
In this example, the PayPal button is mounted in the Drawer element, which is mounted after a button click. The Drawer is unmounted when you click in any place outside the drawer.
class Modal extends React.Component {
constructor() {
super()
this.state = {
open: false
}
}
render () {
return (
<div>
<button onClick={() => this.setState({ open: true })}>Open Drawer</button>
{
this.state.open &&
<Drawer anchor="left" open={true} onClose={() => this.setState({ open: false })}>
<PayPalButton
commit={this.state.commit}
env={this.state.env}
client={this.state.client}
payment={(data, actions) => this.payment(data, actions) }
onAuthorize={(data, actions) => this.onAuthorize(data, actions)}
/>
</Drawer>
}
</div>
)
}
}
Working demo: https://codepen.io/herodrigues/pen/gqQEgr