Помещение div внутри ссылки - область, по-прежнему доступная вне div

Я помещаю div внутри тега aс намерением, что только когда я наведу курсор на область, занятую div, я получаю курсор в виде руки.

Но у него странное поведение.

Вы можете видеть, что div имеет фиксированные размеры (красная рамка).

Но даже если я перемещаю мышь за пределами в div, все равно появляется курсор в виде руки. Почему?

Как я уже сказал, я в основном хочу, чтобы только область внутри красной рамки была кликабельной.

Вот код:

const AppCustomIcon = (props) => {
    return (
        <a target = "blank"

           href = {props.url}>
        <div style = {{
            height: 100,
            width: 100,
            display: "flex",
            flexDirection: "column",
            border:"1px solid red",
            alignItems: "center"
        }}>


                <IconButton
                    style = {{marginRight: 10}}
                    onClick = {props.handleClick}
                >
                    {props.icon}
                </IconButton>
                <Typography variant = {"body1"}>{props.text}</Typography>

        </div>
        </a>

    )
}