Estoy tratando de agregar o eliminar una clase activa si hago clic en cualquier elemento de la lista pero el código no funciona. Aquí está mi función

 const list = document.querySelectorAll('.m-list') as NodeListOf<Element> function activeLink(this: any) { list.forEach((item) => item.classList.remove('active')) // list.forEach((item) => item.classList.add('active')) this.classList.add('active') } list.forEach(item => item.addEventListener('click', activeLink))

Código completo con HTML

 export default function MobileNavigation() { const list = document.querySelectorAll('.m-list') as NodeListOf<Element> function activeLink(this: any) { list.forEach((item) => item.classList.remove('active')) // list.forEach((item) => item.classList.add('active')) this.classList.add('active') } list.forEach(item => item.addEventListener('click', activeLink)) return <div className='mobile-navigation'> <ul> <li className='m-list active'> <a href="#"> <span className='m-icon'><i className="fa-solid fa-house"></i></span> <span className='m-text'>Home</span> </a> </li> <li className='m-list'> <a href="#"> <span className='m-icon'><i className="fa-solid fa-shop"></i></span> <span className='m-text'>Shop</span></a> </li> <li className='m-list'> <a href="#"><span className='m-icon'><i className="fa-solid fa-store"></i></span> <span className='m-text'>Vendors</span></a> </li> <li className='m-list'> <a href="#"><span className='m-icon'><i className="fa-solid fa-address-card"></i></span> <span className='m-text'>About us</span></a> </li> <li className='m-list'> <a href="#"><span className='m-icon'><i className="fa-solid fa-headset"></i></span> <span className='m-text'>Contact Us</span></a> </li> <div className="indicator"></div> </ul> </div>; }