Disable behavior for specific Links

[elC0mpa]

I have the following component which have a Link and inside it a Button. The button handler makes use of e.preventDefault() an e.stopPropagation().

      <Link
        href={`/product/${product.code}?currency=${selectedCurrency._id}&inventory=${selectedInventory._id}`}
      >
        <div className="h-[40px] bg-primary rounded-t-lg"></div>
        <div className="w-full h-[290px] relative">
          <Image
            src={product.imageUrl || PlaceHolderImage}
            alt={product.name}
            style={{ objectFit: "cover" }}
            quality={100}
            fill
          />
          {!!product.containedProducts?.length && <ProductCardKit />}
        </div>
        <div className="px-2 pt-3">
          <ProductCardInfo
            product={product}
            selectedCurrency={selectedCurrency!}
          />
          <Button
            variant="outlined"
            startIcon={<IconShoppingBag size={24} />}
            sx={{
              width: "100%",
              height: "56px",
              borderRadius: "8px",
              borderWidth: "2px",
              padding: "16px",
            }}
            onClick={addProductToCart}
          >
            <p className="text-button uppercase font-bold">Añadir a cesta</p>
          </Button>
        </div>
      </Link>

Even in this way the top loader behavior is triggered and it shows indefinitely, how can I avoid this?

[TranThanhTamBuu]

@elC0mpa This work for me

event.preventDefault();
event.nativeEvent.stopImmediatePropagation();