Tracking traffic sent to clients

I have a new directory website with Google Analytics 4.

I am trying to record website_click events when someone clicks a link that takes them to the external website. This is to understand and report on how much traffic I am sending to these clients.

Unfortunately, I can’t see the event being recorded. I have tried installing and using Google Analytics Debugger but I see no new output in my Console.

Here is the code I am using

 <head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-HIDDENTAG"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-HIDDENTAG');
</script>
 <script>
    $( document ).ready(function(event) {
      $( ".link_to_provider" ).click(function(event) {
        event.preventDefault();
        setTimeout(visitProvider, 1000);
        var visited = false;

        function visitProvider() {
          if (!visited) {
            visited = true;
            window.open('{{ $company->website }}');
          }
        }

        // Sends the event to Google Analytics and
        // resubmits the form once the hit is done.
        ga('send', {
          hitType: 'event',
          eventCategory: 'provider',
          eventAction: 'website_visit',
          eventLabel: '{{ $company->id }}',
          hitCallback: visitProvider
        });
      });
    });
  </script>
  </head>
  <body>
  ....
                          <a href="https://www.example.com" rel="nofollow" class="link_to_provider"><button class="btn btn-primary px-4 mb-1 mt-0">Visit Website</button></a>
.....
  </body>

Thanks for the help.