htmx:afterRequest event not working in my HTMX form submission

i am building a simple form to learn HTMX but I am unable to make htmx:afterRequest work properly.

<form autocomplete="off" id="wa-link-form"
                                hx-post="<?= $baseUrl ?>/api/create_link"
                                hx-trigger="submit"
                                hx-target="#result"
                                hx-swap="outerHTML"
                                hx-on="htmx:afterRequest: clearForm(); reissueCsrfToken();">
...
</form>

Here’s my JS function that I want to call:

<script>
        function clearForm() {
            document.getElementById('wa-link-form').reset(); // Reset all form fields
        }

        function reissueCsrfToken() {
            fetch('whatsapp/api/get_csrf_token') // Endpoint that provides a new CSRF token
                .then(response => response.json())
                .then(data => {
                    document.getElementById('csrf_token').value = data.csrf_token; // Update the CSRF token value
                })
                .catch(error => console.error('Error fetching new CSRF token:', error));
        }
    </script>

Please somebody tell me what I am doing wrong?