React-modalのライブラリーを使って異なる内容をモーダルで表示したい！！

Question

やりたいこと

配列Aをmapで「？」表示し、モーダルをクリックしたらその配列の値をモーダルで表示したい

例）

const amountLists = [1, 2, 3, 4, 5];

map処理後
↓
?　？　？　？　？

2番目の要素をクリックしたら以下の写真の位置にモーダルで2を表示
4番目をクリックしたら4を表示

現在のコード

import { useState } from "react";
import Modal from "react-modal";

import { css } from "@emotion/css";

Modal.setAppElement("#root");

export const Game = () => {
  const [modalIsOpen, setIsOpen] = useState(false);

  const amountLists = [1, 2, 3, 4, 5];
  return (
    <div className="game">
      {amountLists.map((amountList, index) => (
        <li key={index} onClick={() => setIsOpen(true)}>
          ？
          <Modal
            isOpen={modalIsOpen}
            onRequestClose={() => setIsOpen(false)}
            overlayClassName={{
              base: "overlay-base",
              afterOpen: "overlay-after",
              beforeClose: "overlay-before",
            }}
            className={{
              base: "content-base",
              afterOpen: "content-after",
              beforeClose: "content-before",
            }}
            closeTimeoutMS={500}
            portalClassName={css`
              .overlay-base {
                padding: 1rem;
                position: fixed;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                background-color: rgba(0, 0, 0, 0);
                opacity: 0;
                transition-property: background-color, opacity;
                transition-duration: 500ms;
                transition-timing-function: ease-in-out;
                outline: 0;
                display: flex;
                justify-content: center;
                align-items: center;
              }

              .overlay-after {
                background-color: rgba(0, 0, 0, 0.8);
                opacity: 1;
              }

              .overlay-before {
                background-color: rgba(0, 0, 0, 0);
                opacity: 0;
              }

              .content-base {
                position: relative;
                top: auto;
                left: auto;
                right: auto;
                bottom: auto;
                margin: 0 auto;
                border: 0;
                outline: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 0%;
                width: 0%;
                background-color: transparent;
                transition-property: background-color, width, height;
                transition-duration: 500ms;
                transition-timing-function: ease-in-out;
              }

              .content-after {
                width: 70%;
                height: 40%;
                background-color: rgba(250, 190, 190, 0.8);
              }

              .content-before {
                width: 0%;
                height: 0%;
                background-color: transparent;
              }
            `}
          >
            <div>{amountList[2]}</div>
            <button onClick={() => setIsOpen(false)}>Close Modal</button>
          </Modal>
        </li>
      ))}

      {/* <button onClick={() => setIsOpen(true)}>Open Modal</button> */}
    </div>
  );
};

現在の状況

配列をmapではてなを表示し、クリックしたらモーダルを表示するところまでできました。
しかし、上記のコードでは数字が表示されないのに加え、closeボタンを押してもモーダルが消えません。

どうしてモーダルが閉じないのかわかりません。
ご教授いただけますと幸いです。
よろしくお願いします。