Have different behavior when clicked on card and button present in the card

Question

I have a react project which shows a grid of product item cards. I have added a link component above the card component to handle click on product item card. Now I am adding a button in the card and I want to have different behavior. I am not getting how do I override the behavior of enclosing Link component. Following is the code snippet,

const Product = (props) => {
   ...
   return (
        /* Product Box */
        <CardGroup className="col-12 col-md-3 mb-4">
            <Link to={link}>
                <Card className="m-2" style={styles.card}>
                    <Card.Img src={img} style={styles.cardImage} />
                    <Card.Body>
                        <Card.Title as="h4"  className='text-truncate'>{title}</Card.Title>
                        <Card.Title as="h6">Deposit - {deposit}</Card.Title>
                        <Card.Title as="h6">Rent - {rent}</Card.Title>
                    </Card.Body>
                    {
                        show_delete ? 
                        <Card.Footer className='text-center bg-transparent border-0'>
                            <Button title="Remove" className='btn btn-danger btn-sm' onClick={() => deleteProduct()}>
                                <i class="fa-solid fa-trash"></i> Remove
                            </Button>
                        </Card.Footer>
                        : <></>
                    }
                </Card>
            </Link>
        </CardGroup>
    /* Product Box End */
    )
}

When I click on 'Remove' button, I want the control to go to function 'deleteProduct' but insteal I am being redirected to link (as it's the target for Link component).

• List item