Как правильно передать на кнопку дочернего компонента функцию отправляющую запрос?

Question

[ddgryaz]

Доброго времени суток всем!

Подскажите пожалуйста, у меня есть компонент (скажем - Родитель), в котором я с помощью метода map рендерю компонент карточки. В родителе, у меня есть функция "deleteCard", которая отправляет запрос на сервер. Как правильно передать эту функцию на кнопку каждой карточки?

Родитель

const Test = () => {
    const [test, setTest] = useState([])

    const deleteCard = async (id) => {
        try {
            await deletedCard(id)
        } catch (e) {
            console.log('test')
        }
    }
    
    return (
        <div>
            <Box sx={{ flexWrap: 'wrap', display: "flex", p: 1, m: 1 }}>
                {
                    test.map(tes =>
                        <CardItem key={tes._id}
                                  user={tes.user}
                                  airdropName={tes.name}
                                  link={tes.link}
                                  notes={tes.notes}
                                  date={tes.date}
                        />
                    )
                }
            </Box>
        </div>
    );
};

export default Test;

А вот элемент компонента карточки, где рисуется кнопка, мне хотелось бы чтобы по нажатию на кнопку, отправлялся запрос на сервер с переданным айдишником карточки:

Карточка

<Typography variant="body2" color="text.secondary" component="span">
                        <div className={classes.bottom}>
                            <a href={props.link} target="_blank">
                                <IconButton color="primary" aria-label="link ref" component="span">
                                    <PaidIcon />
                                </IconButton>
                            </a>
                            <IconButton color="error" aria-label="delete card" component="span"
                                                onClick={???}>
                                <DeleteOutlineIcon />
                            </IconButton>
                        </div>
</Typography>

Компоненты постарался максимально упростить, но чтобы суть вопроса осталась понятна. На компоненте карточки рисуется иконка мусорки (кнопка удалить).

Заранее спасибо!)