Поповер материала не закрывается при закрытом вызове

Question

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

import React from "react";
import "./styles.css";
import Chat from "./Chat";

export default function App() {
  return (
    <div className="App">
      <Chat />
    </div>
  );
}

Вот пример этой песочницы.

https://codesandbox.io/embed/zealous-maxwell-3115b?fontsize=14&hidenavigation=1&theme=dark

Answer 1

<InputAdornment position="end">
    <IconButton aria-describedby={id} onClick={handleEmojiClick}>
        <EmojiEmotionsIcon />
    </IconButton>
    <PopOver
       open={open}
       id={id}
       anchorEl={anchorEl}
       setAnchorEl={setAnchorEl}
     />
     <IconButton>
          <SendIcon />
     </IconButton>
</InputAdornment>

Только что вытащил Popover из IconButton Component, и теперь он работает.