I want to use the map function to show on the same modal different content and update them when necessary, I decided to go with props and I don't get why it isn't working. What I get instead is when I click on View All

This is my Parent component

<div
      style={{
        display: "flex",
        justifyContent: "space-between",
        fontWeight: 600,
      }}
    >
      {Res.AdmissionsRes.slice(0, 3).map((admission, index) => (
        <S.BackCardGuIn
          bR="16px"
          bg="#f8f9fa"
          bS="0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%)"
          style={{ textAlign: "center" }}
          height="32rem"
          width="calc(100% - 190px)"
          padding="0"
          margin="2%"
        >
          <S.BackCardGuInCir
            border="none"
            // bR="20px"
            // bBL="0"
            // bBR="0"
            bPos="center"
            bg={admission.programImg}
            bSize="cover"
            position="relative"
            top="30px"
            width="9rem"
            height="9rem"
          />
          <p
            style={{
              textAlign: "center",
              fontSize: "20px",
              lineHeight: "28px",
              fontWeight: 600,
              marginTop: "35px",
            }}
          >
            {admission.programType}
          </p>
          <p
            style={{
              fontWeight: 500,
              textAlign: "center",
              minHeight: "40px",
            }}
          >
            Accelerate your growth in the medical domain with the fully
            managed RHIBMS school which stands at {admission.programFee}
          </p>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
            }}
          >
            <S.ApplyForThis  onClick={()=> {
              setProgramInstance(admission)
              handleShow();
              }}>
              View All {admission.programType.slice(0, 3)}
            </S.ApplyForThis>
            <Modal
              title={admission.programType}
              programImg={admission.programImg}
              programFee={admission.programFee}
              onClose={() => setShow(false)}
              show={show}
            />

        
      </div>

My Modal component is below

<E.Modal onLoad={()=>setProgramType(`${props.title}`)} onClick={props.onClose}>
 
  <E.ModalContent
    className="animate__animated animate__bounceInUp"
    onClick={(e) => e.stopPropagation()}
  >
    <E.ModalHeader>
      <E.ModalTitle></E.ModalTitle>
    </E.ModalHeader>
    <E.ModalBody>
    <S.BackCardGuInCir
            border="none"
            // bR="20px"
            // bBL="0"
            // bBR="0"
            bPos="center"
            bg={props.programImg}
            bSize="cover"
            position="relative"
            top="0"
            width="22rem"
            height="22rem"
          />
      <ProgramTable tuition={props.programFee} title={props.title}/>
    </E.ModalBody>
    <E.ModalFooter>
      <E.ModalBtn onClick={props.onClose}>Close!</E.ModalBtn>
    </E.ModalFooter>
  </E.ModalContent>
</E.Modal>

So far, only the last object is rendering on the modal always and not updating. I'm really stuck!