I want to add and remove 'selected-bullet' class but first time it is working and after refresh browser it is not working. why is not forEach working after page refresh?

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>
  );
};