Как закрыть всплывающее окно при нажатии на другие пункты меню (и при нажатии на любую область вне окна)?

Есть navbar с несколькими пунктами меню, при нажатии на которые появляется всплывающее окно (отдельный hidden компонет), с помощью подобной функции.

onClickMenu1= () => {
        this.setState(({hide1}) => {
            return {
               hide1: !hide1
            }
        });
    }

let classMenu1 = "dropdown-menu1";
    if (hide1) {
          classMenu1 += " visible";
        };

onClickMenu2= () => {
        this.setState(({hide2}) => {
            return {
               hide2: !hide2
            }
        });
    }

let classMenu2 = "dropdown-menu2";
    if (hide2) {
          classMenu2 += " visible";
        };

Всплывающее окно можно закрыть, если еще раз нажать на пункт меню, а иначе при открытии других окон они просто наслаиваются друг на друга. Как сделать так, чтобы при открытии одного окна другие автоматически закрывались?
Если кто-то еще сможет подсказать, как закрыть это же окно кликаньем на область вне окна - буду признателен.