Проблема с Material UI

Есть хук use effect , в котором переключается выделение строки :

const dataGridContainerRef = useRef(null);

  useEffect(() => {
    const handleRowClick = (event) => {
      const selectedRow = event.target.closest('.MuiDataGrid-row');
      if (selectedRow) {
const a = document.querySelector('.Mui-selected')
        const isSelected = selectedRow.classList.contains('selected');

        if (isSelected) {
          a.style.background = "white";
          selectedRow.classList.remove('selected');
        } 
         else {
          a.style.background = "";
          selectRow.classList.add('selected');
        }
      }
    };

    const dataGridContainer = dataGridContainerRef.current;
    if (dataGridContainer) {
      dataGridContainer.addEventListener('click', handleRowClick);
    }

    return () => {
      if (dataGridContainer) {
        dataGridContainer.removeEventListener('click', handleRowClick);
      }
    };
  }, []);

Проблема заключается в том, что при клике на другую строку таблицы выделение снимается только с третьего клика. Как исправить?