Estoy trabajando en un mercado de comercio electrónico, el código parece estar bien, pero el botón de PayPal parece mostrarse al principio al cargar, pero luego desaparece después de 4-5 segundos. la consola muestra "Error no controlado Error: zoid destruyó todos los componentes". He probado a cambiar de navegador pero el problema persiste. A continuación se muestra mi código:

 useEffect(() => { const addPaypalScript = async () => { const { data: clientId } = await axios.get( `/api/config/paypal/${orderId}` ) const script = document.createElement('script') script.type = 'text/javascript' script.src = `https://www.paypal.com/sdk/js?client-id=${clientId}` script.async = true script.onload = () => { setSdkReady(true) } document.body.appendChild(script) } addPaypalScript() if (!order || successPay) { dispatch({ type: ORDER_PAY_RESET }) dispatch(getOrderDetails(orderId)) } else if (!order.isPaid) { if (!window.paypal) { addPaypalScript() } else { setSdkReady(true) } } }, [dispatch, orderId, successPay, order])

a continuación se muestra el código de interfaz del botón de paypal

 <ListGroup.Item> <Row> {loadingPay && <Loader />} {!sdkReady ? ( <Loader /> ) : ( <PayPalButton onButtonReady={() => setSdkReady(true)} amount={order.totalPrice} onSuccess={successPaymentHandler} /> )} </Row> </ListGroup.Item>