The official NPM package @paypal/react-paypal-js: https://www.npmjs.com/package/@paypal/react-paypal-js only supports buttons that require client_id, I have not been able to find anything that simplifies the implementation of Donate button. PayPal provides only this HTML code below on the Donate button documentation. Please let me know if anyone has had a similar experience and how did you manage to implement it properly in React/Gatsby.
<head><meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. --><meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility --></head><body><script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script></body><body><div id="paypal-donate-button-container"></div><script> PayPal.Donation.Button({ env: 'sandbox', hosted_button_id: 'YOUR_SANDBOX_HOSTED_BUTTON_ID', // business: 'YOUR_EMAIL_OR_PAYERID', image: { src: 'https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif', title: 'PayPal - The safer, easier way to pay online!', alt: 'Donate with PayPal button' }, onComplete: function (params) { // Your onComplete handler }, }).render('#paypal-donate-button-container');</script></body>