The modal(green box) needs to appear under each seperate red box once there is an onHover event. at the moment the green box is only appearing in the same area. so it would be a modal opening under each different red box. thanks in advance

sandbox here https://codesandbox.io/s/modal-array-ccpso3?file=/src/App.js:0-1283

import React, { useState } from "react";
import roundFace from "../src/sad.png";

const data = [
  { image: roundFace, number: 1 },
  { image: roundFace, number: 2 },
  { image: roundFace, number: 3 }
];

export const Items = (imageUrl, heading) => (
  <div className="flex flex-col">
    <div className="px-2 py-2 mx-auto align-middle">
      <div className="w-16 h-16 border-solid border-4 border-red-600">
        <img className="" src={imageUrl} alt="" />
        <div className={heading} />
      </div>
    </div>
  </div>
);
export const App = () => {
  const [Hover, setHover] = useState(false);

  return (
    <div className="">
      <div className="grid gap-x-8 gap-y-4 grid-cols-3 px-2 py-2">
        {data &&
          data.length > 0 &&
          data.map((box, index) => (
            <div key={`-${index}`}>
              <div
                onMouseEnter={() => setHover(true)}
                onMouseLeave={() => setHover(false)}
              >
                <Items imageUrl={box.image} />
              </div>
              {box.number}
            </div>
          ))}
        {Hover && (
          <p className="w-16 h-16 border-solid border-4 border-green-600">
            Hi!
          </p>
        )}
      </div>
    </div>
  );
};

export default App;

import * as React from "react";
import { render } from "react-dom";

import App from "./App";

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