Best way to have a button on top of a clickable Card | Mantine | Page 1

I have a custom card model that is clickable with onClick and style={{ cursor: pointer }}.

I want to have a favourite button (ActionIcon) that lies on top of the Card, but clicking on the ActionIcon ends up clicking the Card itself as well.
Is there a better way to approach this rather than having a seperate button to trigger the Card's onClick action?

                <Card
                    shadow="sm" 
                    padding={"lg"} 
                    radius={"md"} 
                    miw={"32rem"} 
                    maw={"32rem"}
                    mih={"14rem"}
                    mah={"14rem"}
                    style={{ cursor: "pointer" }}
                    onClick={() => onCardClick(courseId)}
                >
                    <Group justify="space-between">
                        <Title order={1}>{courseId}</Title>
                        <ActionIcon size={"xl"} variant="outline">
                            <IconStar style={{ width: 100 }} />
                        </ActionIcon>
                    </Group>
                    <Divider my={"md"}/>
                    <Text lineClamp={4}>{courseDescription}</Text>
                </Card>

#Best way to have a button on top of a clickable Card