IE and Firefox behaving defferently when checkbox inside tag

I am working on creating a card component in react which has a <a> tag, div inside <a> tag(with some padding) and a checkbox inside the div.

The below scenarios are to be fulfilled

• The div inside the <a> tag should not be clickable so added event.preventDefault()

• The checkbox should be clickable and since its inside the <a> tag so onChange will not be triggered since its parent(div) is having event.preventDefault() so onClick gets triggered before onChange so I am doing event.stopPropagation in onClick event of checkbox

This solution works perfectly in chrome but is having issues when running firefox and IE

Firefox behaviour

• The <a> tag works as expected

• The div is also not clickable

• The checkbox does trigger onChange but then it takes to the link given in the href of anchor tag, though event.stopPropagation has been given in onClick event

IE behaviour(I have tried in IE 11)

• The link doesn't work at all
• The div works as expected

When doing inspect element

• In chrome div occupies full width as expected
• In IE and Firefox, there is boundary covered by <a> tag and div also occupies the area inside that boundary

Here is the link to code https://codesandbox.io/s/0mp8z1p15v

I know wrapping up in div instead of <a> will fix everything but I am not able to figure out reason why its behaving differently in different browsers. And even after doing event.stopPropagation the link gets triggered.

Thank you for your help.