Javascript- Onclick event doesn’t open popup modal

This is Salesforce lwc component code. For some reason when I click “New Correspondence” button, nothing happens and no debug log on F12 dev console.

This button does not get registered for some reason.

<lightning-button class="new-correspondence-button" label="New Correspondence" onclick={showNewCorrespondenceModal}></lightning-button>

Full code is below for HTML and JS

<template>
<div class="button-container">
    <lightning-button class="new-correspondence-button" label="New Correspondence" onclick={showNewCorrespondenceModal}></lightning-button>
    <template if:true={hasExistingCorrespondences}>
        <lightning-button class="existing-correspondence-button" label="Select Existing Correspondence" onclick={handleSelectExisting}></lightning-button>
    </template>
</div>

<div class="correspondence-list-container">
    <template if:true={showCorrespondenceList}>
        <c-correspondence-list parent-id={recordId} oncorrespondenceselected={handleCorrespondenceSelected}></c-correspondence-list>
    </template>

    <template if:true={selectedCorrespondenceId}>
        <c-message-list correspondence-id={selectedCorrespondenceId} key={selectedCorrespondenceId}></c-message-list>
        <c-message-input correspondence-id={selectedCorrespondenceId} onmessagesent={handleMessageSent}></c-message-input>
    </template>
</div>

<template if:true={showNewCorrespondenceModal}>
    <c-new-correspondence-modal onclose={hideNewCorrespondenceModal} onsave={createNewCorrespondence}></c-new-correspondence-modal>
</template>

import { LightningElement, api, track, wire } from 'lwc';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import createCorrespondence from '@salesforce/apex/MessageService.createCorrespondence';
import getCorrespondences from '@salesforce/apex/MessageService.getCorrespondences';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class MessagingApp extends LightningElement {
    @api recordId;
    @api objectApiName;
    @track selectedCorrespondenceId;
    @track showCorrespondenceList = false;
    @track hasExistingCorrespondences = false;
    @track showNewCorrespondenceModal = false; // This is the tracked property to manage modal visibility

    @wire(getObjectInfo, { objectApiName: '$objectApiName' })
    objectInfo;

    get objectType() {
        return this.objectInfo.data ? this.objectInfo.data.apiName : null;
    }

    connectedCallback() {
        console.log('connectedCallback called');
        this.checkExistingCorrespondences();
    }

    handleCorrespondenceSelected(event) {
        console.log('handleCorrespondenceSelected called with event:', event);
        this.selectedCorrespondenceId = event.detail;
        this.showCorrespondenceList = false;
    }

    showNewCorrespondenceModal() {
        console.log('showNewCorrespondenceModal called');
        this.showNewCorrespondenceModal = true; // Show the modal by setting the tracked property to true
        console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
    }

    hideNewCorrespondenceModal() {
        console.log('hideNewCorrespondenceModal called');
        this.showNewCorrespondenceModal = false; // Hide the modal by setting the tracked property to false
        console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
    }

    createNewCorrespondence(event) {
        console.log('createNewCorrespondence called with event:', event);
        const subject = event.detail.subject;
        if (!subject) {
            console.log('Subject is required');
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Subject is required',
                    variant: 'error'
                })
            );
            return;
        }

        console.log('Creating correspondence with subject:', subject);

        createCorrespondence({
            parentId: this.recordId,
            parentObjectType: this.objectType,
            correspondenceName: subject
        })
        .then(correspondenceId => {
            console.log('Correspondence created with ID:', correspondenceId);
            this.selectedCorrespondenceId = correspondenceId;
            this.showNewCorrespondenceModal = false; // Hide the modal after creating the correspondence
            console.log('showNewCorrespondenceModal state:', this.showNewCorrespondenceModal);
        })
        .catch(error => {
            console.error('Error creating correspondence:', error);
            this.dispatchEvent(
                new ShowToastEvent({
                    title: 'Error',
                    message: 'Failed to create correspondence',
                    variant: 'error'
                })
            );
        });
    }

    handleSelectExisting() {
        console.log('handleSelectExisting called');
        this.showCorrespondenceList = true;
    }

    checkExistingCorrespondences() {
        console.log('checkExistingCorrespondences called');
        getCorrespondences({ parentId: this.recordId })
        .then(data => {
            console.log('Existing correspondences:', data);
            this.hasExistingCorrespondences = data.length > 0;
        })
        .catch(error => {
            console.error('Error fetching correspondences:', error);
        });
    }

    handleMessageSent() {
        console.log('handleMessageSent called');
        this.template.querySelector('c-message-list').refreshMessages();
    }
}