Отображение выпадающего списка Emoji перед диалоговым окном в 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, но не увенчался успехом.