我希望每次地图功能迭代时都能更改模态的内容

Question

我想使用地图功能在相同的模态不同的内容上显示并在必要时更新它们，我决定使用道具，我不知道为什么它不起作用。 我得到的是 当我单击查看全部

这是我的父组件

<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>

我的模态组件低于

<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>

到目前为止，只有最后一个对象始终在模态上呈现而不是更新。我真的被困！