Semantic UI React href of label in corner of image with its own href causes errors

Question

I am receiving "Warning: validateDOMNesting(...): cannot appear as a descendant of ." error when trying to get a label with a href to appear in the corner of an image which also has a href. I understand that this is because of nested tags, but I cannot get any other way to work when i try different "as" properties. Either the image link doesn't work, or the label link doesn't work.

Current code:

<Image
  href="some-link"
  as="a"
  fluid
  src="https://somesource.com"
  label={{
    corner: "right",
    icon: "plus",
    as: "a",
    href: "#",
    onClick: () => {
      dosomestuff();
    },
  }}
/>

I want clicking the image to link to the images href, and clicking the label to run a js function as defined in the code.

Appreciate any help

Here is a code sandbox demonstrating what I am trying to achieve. Notice how the only way to get the label to link differently to the image is using two a tags.

https://codesandbox.io/s/funny-wildflower-cnvzp?file=/example.js

Answer 1

Here is how I have achieved the desired result. Not sure if this is the correct way of doing this, and if there may be performance/accessibility issues.

When any part of the image is clicked the nodeName of the element determines the result. If it is "IMG" then the image was clicked. Otherwise, the "a" or icon was clicked.

<Image
  fluid
  src="https://somesource.com"
  onClick={(el) => {
    if (el.target.nodeName === "IMG") {
      history.push(`product/${product.slug}`);
    } else {
      addProduct(product._id, product.title);
    }
  }}
  label={{
    corner: "right",
    icon: "plus",
    as: "a",
  }}
/>