反应组件中的传递道具错误

I have simple Reactjs app that includes the Card and Modal components. every Card must have a Modal that when clicking on "Show More" button, open it.

Modal should only show the title on its Card and my problem is passed props to Modal, just send the title of the last Card And not about itself!

Here is my app in CodeSandBox: Demo

卡组件：

const Card = props => {
  const { children, title } = props;
  const { isShowModal, setIsShowModal } = useContext(MainContext);

  const showModalHandler = () => {
    setIsShowModal(true);
  };

  return (
    <div className="card">
      <div className="card-header">
        <h2>{title}</h2>
      </div>

      <div className="card-content">{children}</div>
      <div className="card-footer">
        <button onClick={showModalHandler}>Show More</button>
      </div>

      {isShowModal && <Modal title={title} />}
    </div>
  );
};

模态分量：

const Modal = props => {
  const { setIsShowModal } = useContext(MainContext);

  const closeModalHandler = () => {
    setIsShowModal(false);
  };

  const { title } = props;

  return (
    <div className="modal">
      <h2>Modal: {title}</h2>
      <p>
        You cliked on <b>{title}</b> Card
      </p>
      <hr />
      <button onClick={closeModalHandler}>Close</button>
    </div>
  );
};

Note: I use Context for control open/close modal in isShowModal state and maybe that's the problem?