El modal (cuadro verde) debe aparecer debajo de cada cuadro rojo separado una vez que haya un evento onHover. por el momento el recuadro verde solo aparece en la misma zona. por lo que sería una apertura modal debajo de cada cuadro rojo diferente. gracias de antemano

sandbox aquí 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);