Cloudflare Turnstile not appearing most of the time


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:


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