Current data dans une modal

Bonjour je debut en React et j'ai des solides bases en js, je suis entrain de creer mon portfolio qui autre fois etait en Html&css et js avec react js. j'ai la section service où je liste mes services et j'aimerai grace a un boutton faire a paraitre une modal avec la description du service en question.
voici mon code:
dans un fichier json j'ai la liste des services et leur descriptions

export const serviceBox = [
  {
    lightText: false,
    title: "Backend Development",
    description:
      "Using React, Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called Memories and it is a simple social media app that allows users to post interesting events that happened in their lives.",
    icon: <DiDatabase size="5rem" />,
    tags: ["Laravel,", "Nest js,", "Adonis js..."],
    buttonLabel: "Voir plus",
    id: 0,
  },
  {
    lightText: false,
    title: "Frontend Development",
    description:
      "Node.js, Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called Memories and it is a simple social media app that allows users to post interesting events that happened in their lives.",
    icon: <DiCode size="5rem" />,
    tags: ["React js,", "Vue js,", "Sass,..."],
    buttonLabel: "Voir plus",
    id: 1,
  },
  {
    lightText: false,
    title: "Wordpress Integration",
    description:
      " Express & MongoDB you'll learn how to build a Full Stack MERN Application - from start to finish. The App is called Memories and it is a simple social media app that allows users to post interesting events that happened in their lives.",
    icon: <DiWordpress size="5rem" />,
    tags: ["Theme,", "Plugin,", "SEO,", "Securité ,.."],
    buttonLabel: "Voir plus",
    id: 2,
  },
];

puis dans un composant services.js et dont le code est le suivant:

import { HeadingSection, PHeadingSections } from "../../styles/globalStyles";
import {
  Grid,
  GridItem,
  HeadingGridItem,
  PGridItem,
  ServiceSection,
  TagList,
  Tag,
  SetIconBox,
  ButtonBox,
  Paragraph,
} from "./ServiceStyled";
import React, { useState } from "react";
import { serviceBox } from "../../Data";
import Modal from "../Elements/Modal";

function Services({ lightText, pSection }) {
  const [showModal, setShowModal] = useState(false);

  const handlerModal = () => {
    setShowModal(true);
  };

  return (
    <>
      <ServiceSection>
        <HeadingSection lightText={lightText}>Mes services</HeadingSection>
        <PHeadingSections>{pSection}</PHeadingSections>

        <Grid>
          {serviceBox.map((service, i) => {
            return (
              <GridItem key={i}>
                <SetIconBox>{service.icon}</SetIconBox>
                <HeadingGridItem lightText={lightText}>
                  {service.title}
                </HeadingGridItem>
                <PGridItem>
                  <TagList>
                    {service.tags.map((t, i) => {
                      return <Tag key={i}>{t}</Tag>;
                    })}
                  </TagList>
                </PGridItem>
                <ButtonBox
                  lightText={lightText}
                  onClick={handlerModal.bind(this)}
                >
                  {service.buttonLabel}
                </ButtonBox>
                <Modal
                  onClose={() => setShowModal(false)}
                  show={showModal}
                  {...service}
                />
              </GridItem>
            );
          })}
        </Grid>
      </ServiceSection>
    </>
  );
}

export default Services;

et dans le composant modal.js la le code suivant:

import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
import { HeadingGridItem, Paragraph } from "../Services/ServiceStyled";

const Modal = ({ show, onClose, description, title }) => {
  const [isBrowser, setIsBrowser] = useState(false);

  useEffect(() => {
    setIsBrowser(true);
  }, [isBrowser]);

  const handleCloseClick = (e) => {
    e.preventDefault();
    onClose();
  };

  const modalContent = show ? (
    <StyledModalOverlay>
      <StyledModal>
        <StyledModalHeader>
          <a href="#" onClick={handleCloseClick}>
            x
          </a>
        </StyledModalHeader>
        {title && (
          <StyledModalTitle>
            <HeadingGridItem>{title}</HeadingGridItem>
          </StyledModalTitle>
        )}
        <StyledModalBody>
          <Paragraph>{description}</Paragraph>
        </StyledModalBody>
      </StyledModal>
    </StyledModalOverlay>
  ) : null;

  if (isBrowser) {
    return ReactDOM.createPortal(
      modalContent,
      document.getElementById("modal-root")
    );
  } else {
    return null;
  }
};

const StyledModalBody = styled.div`
  padding-top: 10px;
`;

const StyledModalHeader = styled.div`
  display: flex;
  justify-content: flex-end;
  font-size: 25px;
`;

const StyledModalTitle = styled.h2`
  color: #242526;
`;

const StyledModal = styled.div`
  background: white;
  width: 450px;
  height: 280px;
  border-radius: 15px;
  padding: 15px;
`;
const StyledModalOverlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
`;

export default Modal;

Ce que je veux

J'aimerai que lorsqu'on clique ce le boutton voir plus une fenetre modal s'ouvre avec le tittre du servic et sa description

Ce que j'obtiens

J'ai bien la modal qui s'ouvre mais seulement a chaque fois c'est le titre et le description du 3e service de la liste qui d'affiche. je comprends bien, que c'est un probleme de gestioon des evenements qui a chaque clique vu que je suis sur une boucle map je perds le referent, comment resoudre ce probleme, merci :(