私は子供のコンポーネントにデータを渡す問題がある


私は3つのコンポーネント
サービス(データを含む)
sizeimgContentFootterd 4 ,
サービスモード
データは以下のようになります
export const serviceItemInformation = [
  {
       title: "...",
       id:"...",
       paragraph: ["..."],
       image:{src: "...", alt:"..."},
       modal: {
          title: "...",
          id: "...",
          icon:"...",
          image:{src: "...", alt:"..."},
          list:[...],
          paragraph: ["..."],
     }
  },
  {...}
    ]
サービスは、SimzeImContentHootItem 4およびServicesModeコンポーネントにマップされたデータを送信します
<Container sx={containerWrapper} maxWidth="xl">
        <Grid container spacing={2}>
            {
                serviceItemInformation.map(el => (
                    <>
                        <Grid sx={gridStyle} key={el.id} item lg={4} sm={12} >
                           <SizeimgcontentfooterCard4
                                title={el.title}
                                image={el.image.src}
                                alt={el.image.alt}
                                paragraph={el.paragraph}
                                id={el.id}
                                modalData={el.modal}
                                handleModal={handleModal}
                                modal={modal}
                            />
                            <ServicesModal open={modal} setOpen={setModal} modal={el.modal}/>
                        </Grid>
                    </>
                ))
            }
        </Grid>
</Container>
SizeImgContentFootChannel 4は、モーダルコンポーネントサービスをオープンするボタンでコンテンツを表示する再利用可能なカードです
sizeImgContextFootterCard 4で取得した項目は、期待していたものと正しくマッチします.しかし、ServicesModeコンポーネントでは、ServiceItemInformationの最後のオブジェクトの値のみを取得します.
ServiceModalコンポーネントは
`
COSTサービスモード= ({ open , setopen , mode , })>>
    const StyledModalImageArea = styled(Grid)(({theme}) => ({
        width: "100%",
        height: "100%",
        backgroundColor: "red",
        position: "relative",
        padding: 0,
        backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.555), rgba(0, 0, 0, 0.484)), url(${modal.image.src})`,
        backgroundPosition: "center",
        backgroundAttachment: "local",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        transition: "0.5s", 
        color: "#fff",
        borderTopLeftRadius: 10,
        borderBottomLeftRadius: 10
    }))



    return (
        <StyledBackDrop
            open={open}
            onClick={() => setOpen(false)}
            sx={{ color : "rgba(0, 0, 0, 0.56) !important",  zIndex: (theme) => theme.zIndex.drawer + 1 }}
            transitionDuration= {1000}
        >
            <StyledModal
                hideBackdrop
                open={open}
                onClose={() => setOpen(false)}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                    <StyledModalItems container sx={detailsContainer}>
                        <StyledModalImageArea item lg={5} sm={12}>
                            <BoxOverlay>
                                {modal.icon}
                            </BoxOverlay>
                        </StyledModalImageArea>

                        <Grid item lg={7} sm={12}>
                            <Typography id="modal-modal-title" variant="h4" gutterBottom component="h2">
                                { modal.title }
                            </Typography>
                        </Grid>
                    </StyledModalItems>
            </StyledModal>
        </StyledBackDrop>
    )
}
`
何が問題でありえましたか?
stackOverflow へのリンク