After adding Google reCAPTCHA v3 to my wpcf7, page reloads and then shows the success message. How do i show the message like normal cf7 responce?

Question

So i have forms made from wpcf7 plugin in my site. Now i have added Google reCAPTCHA v3 to one of my form and when i try to submit my form it reloads with sitename.com/#wpcf7-f468-o1 and displays the wfcf7 success message. I do not have any console errors.

this is my callback script

 <script src="https://www.google.com/recaptcha/api.js" async defer></script>
 <script>
      function onSubmit(token) {
         document.getElementById("homepage-form").submit();
      }
 </script>

this is my submit button in cf7 plugin

 <button class="orange-btn border-0 mt-3 g-recaptcha" data-sitekey="xxxxxxxxx" data-callback='onSubmit' data-action='submit'>Send Message</button> 

How do i stop the reload and just show success like normal wpcf7 form that uses Ajax?

I have wp_head(), and wp_footer() in header.php and footer.php respectively.

I tried using default recaptcha integration in contact form7 plugin adding site keys and secret. using default cf7 form no custom function - here the same issue occurred and also form was getting submitted twice