Navigation items not clickable after window onclick event checker

Making the emoji picker into a modal has created some funky bugs. I am not really sure another way to target the picker other than through the event path, using the window click event. I got everything to work, except for the navigation items are now disabled when I run the window event checker.

I have tried several ways of running the for loop, including breaking out of it, but nothing seems to work.

    return (
        <div className="emoji-picker">
            <Picker className="emoji-picker" set='emojione' style={{ zIndex: 1,
                  position: "absolute",
                  top: "230px",
                  left: "34%" }}/>
        </div>
    )
}

 {emojiClick &&
              <div
                style={{
                  zIndex: 1
                }}
              ><EmojiPicker />
              </div>}

  useEffect(() => {
    window.onclick = e => {
      var classNameArray = [];
      if (e.target.className.baseVal === "create-post-icon smile-icon") {
        {
          setEmojiClick(!emojiClick);
        }
      } else {
        for (let i = 0; i < e.path.length; i++) {
          if (e.path[i].className === "emoji-picker") {
            classNameArray.push("match");
          } else {
            null;
          }
          if (classNameArray.length > 0) {
            setEmojiClick(true);
          } else {
            setEmojiClick(false);
            classNameArray = [];
          }
        }
      }
    };
  });```

[mlshv]

I had a similar problem too. Switching from display: block/none to visibly: visible/hidden fixed it for me

[panalgin]

I somewhat have a similar problem too, upon using emoji-mart inside a modal container, my navigation items are no-longer clickable until I manually click one of the emojis in the scrolled-container. This happens only at the first time the component supposed to be mounted. And the problem happens after an full-refresh (f5) has happened.