Как отменить переход в Link NextJS по клику во вложенном элементе?

Question

[SherbakovFirst]

Всем привет. Есть карточка, которая обёрнута тэгом Link для перехода на какую то страницу.
Внутри карточки есть кнопка, которая открывает модальное окно.
Как отменить переход по Link, если я нажминаю на кнопку внутри обёрнутой тэгом Link карточки

Часть когда внутри page.tsx
import Link from "next/link";

{doubts && doubts.length ? (
          doubts.map((doubt) => (
            <Link href={`/doubt/${doubt.id}`} key={doubt.id}>
              <CardDoubtBlock doubt={doubt} />
            </Link>
          ))
        ) : (
          <p>Нема</p>
        )}

Часть кода внутри cardDoubt

  const handleOpenModal = (event: React.MouseEvent) => {
    event.preventDefault();
    event.stopPropagation(); 
    setViewDoubtModal(true);
  };

 <div className="flex gap-3 items-center">
          <ColorCardElement
            type={doubt.averageReaction}
            className="p-2 rounded-sm md:p-3"
          />
          <div>
            <h3 className="md:text-base">{doubt.title}</h3>
            <p className="text-sm text-secondary">
              Осталось {differenceDayDoubt} дней
            </p>
          </div>
        </div>
        <Button size="sm" onClick={(event) => handleOpenModal(event)}>
          Реакция
        </Button>

Предоставляю кусочки всего, предполагаю что этого хватит