Cloudflare Turnstile not appearing most of the time

Hello!

I would like some assistance with setting up Cloudflare Turnstile with React NextJS.

The problem I am having is the Turnstile on my site does not show up every time the page loads, sometimes it just looks like a blank checkbox.

I am getting the following warnings in the console:

api.js:1 [Cloudflare Turnstile] Turnstile already has been loaded. Was Turnstile imported multiple times?.
h @ api.js:1

VM25 api.js:1 [Cloudflare Turnstile] Cannot find Widget cf-chl-widget-vxlyg, consider using turnstile.remove() to clean up a widget..
h @ VM25 api.js:1

I am implementing Turnstile by a script at the top of my react contact form component:

<Script
        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async={true}
        defer={true}
      />

I am wondering how I would go about fixing this issue and ensuring that the Turnstile loads 100% of the time on the webpage.