Livewire Js Code cleanup issue.

Hi, Hope you guys are doing well.

I was working with a chat application when I faced an issue with cleanup js on Livewire. I was navigating from one friend's inbox to another friend's with wire:navigate so code creates multiple instances for one inbox.

Example: Chat A is chatting with Chat B and Chat C. So, In the Chat A dashboard there have 2 inboxes B and C. When B messages everything okay and When C message and Chat A goes to check the C inbox Was good, But when B did send another message and A was back to B's inbox the message was duplicated. When do page reloads and start working fine.

Now, when they go to C inbox and Then again back to B inbox now one message repeats 3 times because there 3 instance created for echo listeners on the same inbox.

The problem is when I navigate to inbox livewire doesn't do cleanup and when I back it execute my js code again.

Sorry, Maybe I am a bad explainer. IF you have time and have questions please ask me.

Thanks

@script
<script>
    const channel = setTimeout(() => {
        Echo.private('messages.' + {{ $inbox->id }})
            .listen('MessageSent', (e) => {
                let message = document.createElement('div');
                let text = document.createElement('p');
                text.textContent = e.message.message;
                text.classList.add('text-base')

                if (e.message.sender_id === {{ auth()->id() }}) {
                    message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'self-end', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'bg-blue-500', 'text-white');
                } else {
                    message.classList.add('max-w-[80%]', 'md:max-w-[75%]', 'lg:max-w-[70%]', 'p-3', 'rounded-[10px]', 'border-[1px]', 'border-gray-200', 'self-start')
                }
                message.appendChild(text)
                document.getElementById('inbox-{{ $inbox->id }}').appendChild(message);
                let chatBox = document.getElementById('chat-box')
                chatBox.scrollTo(0, chatBox.scrollHeight)
                console.log('Okay')
            })
            .listen('MessageTyping', function (e) {
                const typingEl = document.getElementById('chat-typing')
                if (e.typing) {
                    typingEl.classList.remove('hidden');
                } else {
                    typingEl.classList.add('hidden');
                }
                let chatBox = document.getElementById('chat-box')
                chatBox.scrollTo(0, chatBox.scrollHeight)
            })
    }, 10)


    Livewire.hook('component.init', ({component, cleanup}) => {
        if (component.name !== 'chat.messages'){
            return;
        }

        //I have already tried the Echo code init here and did Echo.leaveChannel() on the cleanup result was worse.

        cleanup(() => {
            clearTimeout(channel)
            //Echo.leaveChannel This is also not working.
        })
    })
</script>
@endscript