Google Analytics 4 - Events are not being tracked

Question

After switching to the new Google Analytics 4, Events are not being tracked anymore.

Here is the new snippet:

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

    gtag('config', 'G-XXXXXXXX');    
</script>

Right underneath I call these on click events:

<script>
// login
$('.btn-login').click(function () {
    var email = $('#email').val();
    console.log(email);
        
    gtag('event', 'login', {
        'event_category': 'Login',
        'event_label': 'Login Click',
        'value': email
    });            

    return true;
});

// menu
$('ul.nav-list > li > a').click(function () {
    var link = $(this).text();
    console.log(link);
    gtag('event', 'Menu', {
        'event_category': 'Menu',
        'event_label': 'Menu Click',
        'value': link
    });
});
   
// mailto link
$('a[href^="mailto:"]').click(function () {
    var link= $(this).attr('href');
    console.log(link);
        
    gtag('send', {
        'hitType': 'event',
        'eventCategory': 'Email Enquiry',
        'eventAction': 'Click',
        'eventLabel': link
    });
    return true;

});        

When clicking around, I see page views but none of my clicks are showing in the Google Analytics dashboard. Can someone spot the issue?

I followed this docs: https://developers.google.com/analytics/devguides/collection/gtagjs/events