title: Next.js setting click event only on Image component
body: <p>I want to be able to just do a click event on only the image, but because I have to set width and height, its setting a click event on the entire parent div.</p>
  <p>for example, if the image is 600 width by 300 height, where there's space between the parent the click event is still happening outside the image but within the parent.</p>
  <pre><code>&lt;div
    style={{ width: 600, height: 600 }}
    className=&quot;image-item bg-gray-200 w-9/12 h-auto relative&quot;
  &gt;
    &lt;div
      onClick={(e) =&gt; handleTags(e)}
      className=&quot;&quot;
      ref={imageWrapRef}
    &gt;
      &lt;Image
        className=&quot;&quot;
        src={image[&quot;data_url&quot;]}
        alt=&quot;&quot;
        layout=&quot;fill&quot;
        objectFit=&quot;contain&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/azn52.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/azn52.jpg" alt="enter image description here" /></a></p>
  <p>The space above and below the image are still clickable, but I just want to click on the image only.</p>
  <p>Screenshot of inspector element of the produced code:</p>
  <p><a href="https://i.stack.imgur.com/kIGXn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kIGXn.png" alt="enter image description here" /></a></p>
  <p>Here's a working codesandbox as well: <a href="https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/proud-rain-d51sv?file=/pages/index.js</a></p>