Quiero agregar y eliminar la clase 'selected-bullet' pero la primera vez que funciona y después de actualizar el navegador no funciona. ¿Por qué forEach no funciona después de actualizar la página?

 const Resume = () => { const bullets = document.querySelector('.bullets'); const bullet = document.querySelectorAll('.bullet'); [...bullet].forEach((el) => { el.addEventListener('click', () => { bullets .querySelector('.selected-bullet') .classList.remove('selected-bullet'); el.classList.add('selected-bullet'); }); }); return ( <div className='resume-bullets'> <div className='bullet-container'> <div className='bullet-icons'></div> <div className='bullets'> <div className='bullet selected-bullet'> <i className='bi bi-mortarboard-fill bullet-logo'></i> <span className='bullet-label'>Education</span> </div> <div className='bullet'> <i className='bi bi-clock-history bullet-logo'></i> <span className='bullet-label'>Work History</span> </div> <div className='bullet'> <i className='bi bi-laptop bullet-logo'></i> <span className='bullet-label'>Programming Skills</span> </div> <div className='bullet'> <i className='bi bi-bar-chart-line bullet-logo'></i> <span className='bullet-label'>Projects</span> </div> <div className='bullet'> <i className='bi bi-palette bullet-logo'></i> <span className='bullet-label'>Interests</span> </div> </div> </div> </div> ); };