I need to invoke a Modal window on each hatch item in array by considering the code provided

Question

Please refer to the following snippet of code:

App.js

import React, { useState, useEffect } from "react";
import { createGlobalStyle } from 'styled-components';
import { createCalendar, hatchArray } from './helpers'
import Hatch from './Hatch'
import { StyledApp } from './AppStyles'

const GlobalStyle = createGlobalStyle`
  body {
    background: url('/img/christmas-bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0;
  }

  .tiens-christmas-header {
    width: 100%;
    margin: 0 auto;
    background: #fff;


  }

  .tiens-christmas-header__inner {
    margin: 0 40px;
    padding: 20px 0;
  }

  .tiens-christmas-header__logo {
    width: 190px;
    height: 110px;
  }

  #logo {
    width: 170px;
    height: 50px;
  }

  .modal-window {
    width: 300px;
    height: 240px;
    background: red;
  }
  .modal-open {
    display: block;
  }
  .modal-closed {
    display: none;
  }
`


function App() {
  const [hatches, setHatches] = useState([])

  useEffect(() => {
    const calendar = localStorage.calendar ? JSON.parse(localStorage.calendar)
    : createCalendar();

    setHatches(calendar);
  }, [])

  // store calendar in localStorage
  useEffect(() => {
    hatches.length && localStorage.setItem('calendar', JSON.stringify(hatches));
  }, [hatches])


  const handleFlipHatch = id => {
    const updatedHatches = hatches.map(hatch =>
      hatch.id === id ? { ...hatch, open: !hatch.open } : hatch
    );
    setHatches(updatedHatches);
  };


  return (
    <>
      <GlobalStyle />
      <StyledApp>
        {
          hatches.map(hatch => 
            <Hatch 
              key={hatch.id} 
              hatchData={hatch}
              handleClick={handleFlipHatch}
            />
            )  
        }
      </StyledApp>
    </>
  );
}

export default App;

Hatch.js

import React from 'react'
import { StyledHatch } from './HatchStyles'

const Hatch = ({ hatchData: { id, nr, text, img, open }, handleClick }) => (
  <StyledHatch background={img} onClick={() => { handleClick(id); }}>
    <div className={ open ? "front open" : "front" }>
      <p>{nr}</p>
    </div>
    <div className={ open ? "back open" : "back" }>
      <p>{text}</p>
    </div>
  </StyledHatch>

)

export default Hatch;

helpers.js

const shuffle = a => {
  const totalDays = 31;
  for (let i = 0; i >= totalDays; i++) {
    a++;
  }
  return a;
};

// Bad one-liners from https://onelinefun.com/christmas
export const hatchArray = [
  {
    id: "hatch-1",
    nr: 1,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-2",
    nr: 2,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-3",
    nr: 3,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-4",
    nr: 4,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-5",
    nr: 5,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-6",
    nr: 6,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-7",
    nr: 7,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-8",
    nr: 8,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-9",
    nr: 9,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-10",
    nr: 10,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-11",
    nr: 11,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-12",
    nr: 12,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-13",
    nr: 13,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-14",
    nr: 14,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-15",
    nr: 15,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-16",
    nr: 16,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-17",
    nr: 17,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-18",
    nr: 18,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-19",
    nr: 19,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-20",
    nr: 20,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-21",
    nr: 21,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-22",
    nr: 22,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-23",
    nr: 23,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-24",
    nr: 24,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-25",
    nr: 25,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-26",
    nr: 26,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-27",
    nr: 27,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-28",
    nr: 28,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-29",
    nr: 29,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-30",
    nr: 30,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  },
  {
    id: "hatch-31",
    nr: 31,
    img: "./img/1.jpg",
    text:
      "Something unique for this card",
    open: false,
  }
  
];

export const createCalendar = () => shuffle(hatchArray);

Basically, as a new to React development, I hardly recognize the coding but yet I am still proud of it, cause this is my personal achievement ). But still yet, I do not know how to implement The Modal window in the advent-calendar which acts like pop-up every time when every hatch card has been clicked. So, there are 31 cards in total and all of them are sorted in ascending order in a grid layout as simple as that. When it is being clicked, it is flipped and the back side of the card is brought to the front. So, I need to invoke the modal window with some specific for the card, text with Christmas congratulations. You can refer to the helpers.js, from out there I need to extract the text for specific card.

Look at the screenshots of the app when it is running

enter image description here enter image description here

I tried to create a component for the Modal. Pass the props and handle it the same way as handleFlipHatch method through the map. But that did not work.