React sub-object click effects parent's click

Question

I am trying to create a react app using carbon design.

        <HeaderName
          element={Link}
          to="/campaigns"
          prefix=" "
          className={["navbar-header", `${path == "/campaigns" ? "selected" : ""}`]}
        >
          Campaigns
          {campaingCount !== 0 ? (
            <Tag
              filter
              onClose={(e) => {
                e.stopPropagation();
                dispatch(deleteAllCampaign());
              }}
              title="Clear Filter"
              type={undefined}
            >
              {campaingCount}
            </Tag>
          ) : null}
        </HeaderName>

Here 'to' attribute of HeaderName routes the page to a url, as a sub object, Tag has its own close button and 'onClose' event is triggered when close button is clicked.

PROBLEM: When I click on the close button of the Tag, Page is routed to '/campaigns' again and all the state is deleted and it effects the business logic.