How to make addEventListener("click") working when language is switched in magento 2 project

I am working on a magento 2 project. The project has two languages. I have encountered a strange behavior where the click events on tabs work on mobile screen when I first load on a language. Once I switch the language, the click events do not seem to work. I have made a screen recording to demonstrate my problem visually.

Here you can find the video

The code for my component is below.

import { shape, string } from 'prop-types';
import React, { useEffect, useRef } from 'react';

import { useWindowSize } from '@magento/peregrine/lib/hooks/useWindowSize';
import { useStyle } from '@magento/venia-ui/lib/classify';
import CmsBlock from '@magento/venia-ui/lib/components/CmsBlock';

import defaultClasses from './footer.module.css';

const Footer = ({ classes }) => {
    const isMobile = useWindowSize().innerWidth < 1024;

    const initialized = useRef(false);

    useEffect(() => {
        const buttonElements = document.querySelectorAll('.col-links');
        if (!initialized.current && isMobile) {
            setTimeout(() => {
                initialized.current = true;
                
                for (let i = 0; i < buttonElements.length; i++) {
                    const handleClick = () => {
                        if (isMobile) {
                            buttonElements[i].classList.toggle('active-tab');
                        }
                    };

                    if (isMobile) {
                        buttonElements[i].addEventListener('click', handleClick);
                    }

                    if (initialized.current && !isMobile) {
                        buttonElements[i].classList.remove('active-tab');
                    }
                }
            }, 500);
        }
    });

    const rootClasses = useStyle(classes, defaultClasses);

    return (
        <footer id="footer" className={rootClasses.root} >
            <div className="footerWrapper">
                <CmsBlock identifiers="footer" />
            </div>
        </footer>
    );
};

export default Footer;

Footer.propTypes = {
    classes: shape({
        root: string
    })
};