Google Recaptcha v3 'handle' event not firing

I am try to use google recaptcha v3 from 'localhost'. I am getting this issue in chrome: "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute". This probably is stopping the data-callback "handle" from firing and my form doesn't submit. The APPLY button simply doesn't function or nothing happens on clicking this button. I have registered for my dev machine and have keys for 'localhost' which is being used. I can see the badge in my dev system which i guess indicates that the integration is working.

Component blade

<div class="row edit-profile m-b30">
	<form wire:submit.prevent="store">
				<!-- Your Profile Views Chart -->
				<div class="col-lg-12 m-b30">
					<div class="widget-box">
						<div class="widget-inner">
                              <div class="row">
                                    <div class="col-12">
                                        <div class="heading-bx left">
                                            <h2 class="title-head">Online <span>Registration</span></h2>
                                        </div>

                                        <p>It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page It is a long established fact that a reader will be distracted by the readable content of a page</p>
                                    
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-12">
										<div class="ml-auto">
											<h3>Course Details</h3>
										</div>
									</div>
									
									<div class="form-group col-6">
										<label class="col-form-label">Course</label>
										<div>
											<select required wire:model="course" class="form-control">
                                                <option value="0" selected>Select Course</option>
                                                @foreach($courses as $selectedcourse)
													<option value="{{$selectedcourse->id}}">{{$selectedcourse->Name}}</option>
                                                @endforeach
                                            </select>
											@error('course')
												<small class="text-danger">{{ $message }}</small>
											@enderror
											
											
										</div>
									</div>


                                    <div class="form-group col-4">
										<label class="col-form-label">Full Name</label>
										<div>
											<input required class="form-control has-error has-feedback" maxlength="100" type="text" placeholder="Your full name" id="student_name" name="student_name" value="{{ old('student_name') }}" wire:model="student_name">
											@error('student_name')
												<small class="text-danger">{{ $message }}</small>
											@enderror
										</div>
									</div>
									
									<div class="col-12">
										
									<button type="submit" 
											class="g-recaptcha btn" 
											data-sitekey="{{env('CAPTCHA_SITE_KEY')}}"
											data-callback='handle'
											data-action='submit'
											name="submit">Apply
										</button>

										<button type="reset" class="btn-secondry">Cancel</button>
									</div>
								</div>
							
							
						</div>
					</div>
				</div>
				<!-- Your Profile Views Chart END-->
			

</form>
</div>


<script src="https://www.google.com/recaptcha/api.js?render={{env('CAPTCHA_SITE_KEY')}}" async defer></script>

<script>

function handle(e) {
    grecaptcha.ready(function () {

		console.log('inside grecaptcha');

        grecaptcha.execute('{{env('CAPTCHA_SITE_KEY')}}', {action: 'submit'})
            .then(function (token) {
                @this.set('captcha', token);
				console.log(token);
        });
    })
}

</script>


<script>

window.addEventListener('otpconfirm', async function() {
            
		
		const { value: otp } = await Swal.fire({
			title: 'OTP Confirmation',
			input: 'text',
			inputLabel: 'Please enter the OTP sent to your phone number',
			inputPlaceholder: 'One Time Password',
			showCancelButton: true,
			inputValidator: (value) => {
				if (!value) {
					return 'You need to write something!'
				}
			}
		})

		if (otp) {
			Swal.fire('OTP Entered: '+otp)
			@this.call('matchotp',otp)
		} 

});


window.addEventListener('focusonerror', function(prop) {

	$('#prop').focus();

});






</script>

And Livewire component

public $captcha=0;

public function updatedCaptcha($token)
    {
        Log::info('in captcha function..');
        
        $response = Http::post('https://www.google.com/recaptcha/api/siteverify?secret=' . env('CAPTCHA_SECRET_KEY') . '&response=' . $token);
        $this->captcha = $response->json()['score'];

        if (!$this->captcha > .3) {
            $this->store();
        } else {
            return session()->flash('success', 'Google thinks you are a bot, please refresh and try again');
            Log::info('Google thinks you are a bot, please refresh and try again');
        }

    }

Errors seen in chrome:

Because a cookie’s SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being sent in a cross-site request. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery. Resolve this issue by updating the attributes of the cookie: Specify SameSite=None and Secure if the cookie should be sent in cross-site requests. This enables third-party use. Specify SameSite=Strict or SameSite=Lax if the cookie should not be sent in cross-site requests. 12 cookies Name Domain & Path OGP .google.com/ OGPC .google.com/ OTZ www.google.com/ __Secure-1PSID .google.com/ HSID .google.com/ SSID .google.com/ APISID .google.com/ SAPISID .google.com/ __Secure-1PAPISID .google.com/ SID .google.com/ UULE www.google.com/ SIDCC .google.com/