在React中对话框的前面显示表情符号下拉菜单

Question

我的index.js文件如下所示：

import React, { useState} from "react";
import ReactDOM from "react-dom";
import Dialog from '@material-ui/core/Dialog'
import { Picker } from "emoji-mart";

const EmojiPicker = () => {
  const [show, setShow] = useState(false);
  return (
    <div>
      <button 
        onClick={() => setShow(oldState => !oldState)}>
        ej
      </button>
      {ReactDOM.createPortal(
        show && (
          <div>
            <Picker title = "" emojiTooltip={true} />
          </div>
        ),
        document.body
      )}
    </div>
  );
};

const TweetSheet = () => {
    return (
      <Dialog open={true} >
        <div style={{ display: "flex",
          flexDirection: "column",
          border: "3px solid",
          borderRadius: "5px",
          width: "50vw",
          height: "40vh",
          padding: "20px"}}>
            TextAreasdfds
            <EmojiPicker />
          </div>
      </Dialog>

    );
  }

const rootElement = document.getElementById("root");
ReactDOM.render(<TweetSheet />, rootElement);

单击Emoji后，我会在对话框的背面显示表情符号选择，因此无法选择它。如何在对话框前面显示它以进行选择？

https://codesandbox.io/embed/focused-sun-0hlc8?fontsize=14

编辑： 我玩过zindex，但没有成功。