I'm trying to detect left and right mouse clicks. I have a div with an onClick handler attached to it. This is what it looks like:

<div className={styles.itemSlot} onClick={this.onClick}></div>

And this is what the 'onClick' looks like:

  private readonly onClick = (evt: React.MouseEvent<HTMLImageElement>) => {
    if (evt.button === 1) {
      console.log('Left Click')
    }
    if (evt.button === 2) {
      console.log('Right Click')
    }
  };

The left click gets detected, but when I click the right button on the mouse, nothing happens. The same is true for the wheel or middle button. Only the left click gets detected.

How can I fix this issue?