Почему мое событие onClick работает с двойным щелчком, а не с одиночным щелчком?

Question

Я фактически конвертирую сайт на основе HTML для сайта на основе реакции, и в этом случае я внес необходимые изменения, но, похоже, проблема с событием щелчка. Это правильный способ сделать это? если нет, что еще можно сделать?

      import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';

function App() {
<div className="experience">
                <div className="role">
                  <p>Mar 2021 – May 2021</p>
                  <KeyboardArrowDownIcon className="down-arrow" onClick={dropdown} />
                  <p className="res">abc</p>
                  <p><a className="company" href="#"> xyz</a>| California, USA</p>
                </div>
                <div className="details">
                  <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.
                  </p>
                </div>
    </div>

    const dropdown = () => {
        let roles = document.querySelectorAll('.role');
        let details = document.querySelectorAll('.details');
        let arrows = document.querySelectorAll('.down-arrow');
    
        for (let i = 0; i < roles.length; i++) {
          roles.item(i).addEventListener('click', function () {
            if ((details.item(i).style.display === 'none') || (details.item(i).style.display === '')) {
              for (let j = 0; j < roles.length; j++) {
                if (details.item(j).style.display === 'block') {
                  details.item(j).style.display = 'none';
                  arrows.item(j).style.transition = '.25s';
                  arrows.item(j).style.transform = 'rotate(0deg)';
                }
              }
              details.item(i).style.display = 'block';
              arrows.item(i).style.transition = '.25s';
              arrows.item(i).style.transform = 'rotate(180deg)';
            } else {
              details.item(i).style.display = 'none';
              arrows.item(i).style.transition = '.25s';
              arrows.item(i).style.transform = 'rotate(0deg)';
            }
          });
        }
      }
}
export default App;

css:

      .details{
display:none;
}

Я добавил событие onClick к значку стрелки, но мне нужно щелкнуть значок стрелки 2 раза, чтобы это событие сработало. Я не могу решить эту проблему. Как это решить?