Hello, I'm trying to embed a button into my website for donating via BuyMeACoffee.

However, it's not drawing the widget in my navbar as it should. It works normally for a second using <script> tags but then I get an error saying that the Hydration failed and it breaks my app.

Then I tried using the <Script> component supplied by NextJS. I tried using all the different strategy options (beforeInitilization, afterInitialization, lazyOnLoad), but none will load the script's content, and none seem to error either.

It should show up as a button like in the screenshot I provided. But instead, the button never appears.

BuyMeACoffee's website says that it doesn't need to belong in the head. Just plop this snippet wherever you want the button to show.

Script tag:

<script type="text/javascript" src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js" data-name="bmc-button" data-slug="REDACTED" data-color="#BD5FFF" data-emoji="☕" data-font="Cookie" data-text="Buy me a coffee" data-outline-color="#000000" data-font-color="#ffffff" data-coffee-color="#FFDD00"></script>

UPDATE: I noticed that I'm getting this warning in my console:
A call to document.write() from an asynchronously-loaded external script was ignored.
but I'm not sure how to get around it.