clearInterval failing for incoming message alert, Seems to work, as messageBoxesCounter reverts to 0 but notification alert not sounding on next chat

Question

I have a script that listens for incoming messages, Once the user starts typing or the message is sent, a notification sound is played so if you are not actively paying attention you will hear the notification and know they are typing to you.

I have the script working for the first chat. But when it detects the close chat button and is supposed to clear the window.newIncomingMessageInterval it looks like it works as the "Chat Alert: NOTIFY: ' + messageBoxes.length" is changed to 0 in the console output. But I won't hear the notification sound in the 2nd chat until it reaches the same message limit as the previous chat.

I am unsure why it isn't clearing the value correctly for the next chat.

I am trying to automate this script from a previous one that had a button you needed to click to start it.

But for the life of me I am unable to get this working the way I want it to.

This is a work project that I really need to figure out.

Any help is greatly appreciated.

// SETTINGS

var notify = true; // true or false / to enable audio notifications on incoming messages.

// --------------------------------------------------------------------------------------------------------------------
// MAIN SCRIPT




var user_settings = {
    notify: notify
}

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'https://PrivateDirectory/ChatAlert/notification.mp3');

(function($, user_settings) {
    'use strict';

    console.log(user_settings)
    var messageBoxes = document.querySelectorAll("div[class^='Body'][direction='Incoming']");
    var messageBoxesCounter = messageBoxes.length;

    console.log('Chat Alert: Cleaner Started');
    main();

    var cleanIntervals = function() {
        console.log('Chat Alert: Cleaning up Intervals');
        clearInterval(window.newIncomingMessageInterval);
        main()
    }


    function main() {
        window.newIncomingMessageInterval = setInterval(function() {
            var messageBoxes = document.querySelectorAll("div[class^='Body'][direction='Incoming']");
            var messageBoxesCounterNew = messageBoxes.length;
            console.log('Chat Alert: NOTIFY: ' + messageBoxes.length);
            if (messageBoxesCounter < messageBoxesCounterNew) {
                console.log('Chat Alert: NEW MESSAGE!');
                if (user_settings.notify) {
                    audioElement.play();
                }
                messageBoxesCounter = messageBoxesCounterNew;
            } else {
                console.log('Chat Alert: No new message');
            }
            if ($("button[data-testid='ccp-next-contact-button']").length === 0) {
                console.log('Chat Alert: Close contact button doesnt exist');
            } else {
                console.log('Chat Alert: Close contact button Exists')
                cleanIntervals();
            }
        }, 1000);

    }

})(window.jQuery, user_settings);

Tried to automate an existing script that had a button in place that you had to click at the start of each chat to enable the sound notification.

I have successfully edited the script for the first chat. But the notification sound for the second chat isn't working correctly.