Реакт-редукс | всплывающие окна не работают с некоторыми делами

Question

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

В случае 1 (https://codesandbox.io/embed/interesting-easley-1jvok) я помещаю Modal в post_index.js, и мы можем вызвать его при нажатии на меню.

import React from "react";
import Modal from "./redux/modal_container";
import PostItemContainer from "./post_item_container";

class PostIndex extends React.Component {
  render() {
    const { posts } = this.props;

    return posts.map(post => (
      <>
        <PostItemContainer
          key={`PostItemContainer${Math.random()}`}
          post={post}
        />
        <Modal
          key={`postMenu${Math.random()}`}
          modalType="postMenu"
          id={post.id}
        />
      </>
    ));
  }
}

export default PostIndex;

Но в случае 2 (https://codesandbox.io/embed/nice-pare-7z2jk) я помещаю Modal в post_item.js и меню не работает.

import React from "react";
import { FaEllipsisH } from "react-icons/fa";
import Modal from "./redux/modal";

class PostItem extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(e) {
    if (e) {
      e.preventDefault();
    }

    const pos = e.target.getBoundingClientRect();
    this.props.openModal("postMenu", {
      postId: this.props.post.id,
      pos,
      mode: "relative"
    });
  }

  render() {
    const { post } = this.props;
    return (
      <li className="post">
        <div className="post-menu-btn" onClick={this.handleClick}>
          <i className="fas fa-ellipsis-h">
            <FaEllipsisH />
          </i>
          <Modal
            key={`postMenu${Math.random()}`}
            modalType="postMenu"
            id={post.id}
          />
        </div>
      </li>
    );
  }
}

export default PostItem;

Может кто-нибудь объяснить разницу между ними?