Не пойму почему setState не обновляет состояние

Всем привет!))) Читала и искала решение этой ошибки, но хоть убейте - не могу найти ответ (или не пойму). Про асинхронность setState знаю. Вроде делаю все ок) Но не обновляется переменная isBurgerMenuOpened. То есть при нажатии на кнопку меню, функция burgerMenuOpen срабатывает, isBurgerMenuOpened меняется на true, а классу burger__navigation добавляется соответствующий класс. Но вот когда я нажимаю на burger__close-button, то burgerMenuClose не срабатывает. Стейт-переменная не меняется. И сообственно, класс не убирается.

Что я не так делаю?((((

function BurgerMenu() {
  const [isBurgerMenuOpened, setIsBurgerMenuOpened]  = React.useState(false);

  React.useEffect(() =>{
    console.log(isBurgerMenuOpened);

  }, [isBurgerMenuOpened] );


  function burgerMenuOpen() {
    setIsBurgerMenuOpened(true);
  }

  function burgerMenuClose() {
    setIsBurgerMenuOpened(false);
  }

  return (
    <div onClick={burgerMenuOpen} className="burger">
      <div className={`burger__navigation ${isBurgerMenuOpened && 'burger__navigation_opened'}`}>
        <div onClick={burgerMenuClose} className="burger__close-button"></div>
      </div>
    </div>
  );
}