Unable to click link inside draggable container in Next.js using Tailwind CSS

Question:

I'm working on a Next.js project where I have a draggable container, and inside it, I have a clickable link. However, when I try to click the link, it doesn't register as a click. It seems that the draggable container is blocking the link, preventing any interaction.

Here’s the relevant part of my code:

1import Image from "next/image";
2import { Badge } from "../../shadcn/Badge";
3import SendmessageIcon from "../../lottie-ui/send-message";
4import CardWrapper from "../card-wrapper";
5
6const Brainwave = () => {
7  return (
8    <CardWrapper>
9      <div className="relative h-full flex flex-col justify-center gap-6 py-4 sm:py-6 px-4 sm:px-8 overflow-hidden">
10        <div className="draggable-area relative flex justify-between w-full h-full items-stretch flex-col pointer-events-none">
11          <div className="absolute h-full w-full aspect-[578/451] shadow-2xl rounded-lg pointer-events-none">
12            <Image
13              src={"/projects/brainwave.png"}
14              alt={"brainwave landing page"}
15              fill
16              style={{
17                objectFit: "cover",
18                objectPosition: "top",
19                borderRadius: "8px",
20              }}
21            />
22          </div>
23        </div>
24        <div className="no-drag flex flex-col items-start gap-1 pointer-events-auto z-10">
25          <h4 className="text-xs font-medium opacity-80 uppercase flex flex-wrap gap-2 items-center">
26            <span className="flex gap-1">
27              <Image
28                src="/tech-icons/github.svg"
29                alt="Github logo"
30                height={12}
31                width={16}
32              />
33              <span className="w-full">Github Repository:</span>
34              <a
35                className="z-50 underline text-blue-500 relative pointer-events-auto"
36                href="https://github.com/jyefuriii/brainwave"
37                target="_blank"
38                rel="noopener noreferrer"
39              >
40                Brainwave
41              </a>
42            </span>
43          </h4>
44          <div className="w-full flex gap-2 items-center">
45            <h1 className="text-2xl font-medium dark:text-white text-black uppercase opacity-90">
46              Brainwave landing page
47            </h1>
48            <SendmessageIcon
49              link="https://brainwave-jyefuriii.vercel.app/"
50              lottieName="BrainwaveIcon"
51            />
52          </div>
53          <div className="flex gap-2 flex-wrap mt-1">
54            <Badge variant="default" className="text-xs">
55              Frontend
56            </Badge>
57            <Badge variant="default" className="text-xs">
58              React
59            </Badge>
60            <Badge variant="default" className="text-xs">
61              Typescript
62            </Badge>
63            <Badge variant="default" className="text-xs">
64              Tailwind
65            </Badge>
66            <Badge variant="default" className="text-xs">
67              GSAP
68            </Badge>
69          </div>
70        </div>
71      </div>
72    </CardWrapper>
73  );
74};
75
76export default Brainwave;
77

1import Image from "next/image";
2import { Badge } from "../../shadcn/Badge";
3import SendmessageIcon from "../../lottie-ui/send-message";
4import CardWrapper from "../card-wrapper";
5
6const Brainwave = () => {
7  return (
8    <CardWrapper>
9      <div className="relative h-full flex flex-col justify-center gap-6 py-4 sm:py-6 px-4 sm:px-8 overflow-hidden">
10        <div className="draggable-area relative flex justify-between w-full h-full items-stretch flex-col pointer-events-none">
11          <div className="absolute h-full w-full aspect-[578/451] shadow-2xl rounded-lg pointer-events-none">
12            <Image
13              src={"/projects/brainwave.png"}
14              alt={"brainwave landing page"}
15              fill
16              style={{
17                objectFit: "cover",
18                objectPosition: "top",
19                borderRadius: "8px",
20              }}
21            />
22          </div>
23        </div>
24        <div className="no-drag flex flex-col items-start gap-1 pointer-events-auto z-10">
25          <h4 className="text-xs font-medium opacity-80 uppercase flex flex-wrap gap-2 items-center">
26            <span className="flex gap-1">
27              <Image
28                src="/tech-icons/github.svg"
29                alt="Github logo"
30                height={12}
31                width={16}
32              />
33              <span className="w-full">Github Repository:</span>
34              <a
35                className="z-50 underline text-blue-500 relative pointer-events-auto"
36                href="https://github.com/jyefuriii/brainwave"
37                target="_blank"
38                rel="noopener noreferrer"
39              >
40                Brainwave
41              </a>
42            </span>
43          </h4>
44          <div className="w-full flex gap-2 items-center">
45            <h1 className="text-2xl font-medium dark:text-white text-black uppercase opacity-90">
46              Brainwave landing page
47            </h1>
48            <SendmessageIcon
49              link="https://brainwave-jyefuriii.vercel.app/"
50              lottieName="BrainwaveIcon"
51            />
52          </div>
53          <div className="flex gap-2 flex-wrap mt-1">
54            <Badge variant="default" className="text-xs">
55              Frontend
56            </Badge>
57            <Badge variant="default" className="text-xs">
58              React
59            </Badge>
60            <Badge variant="default" className="text-xs">
61              Typescript
62            </Badge>
63            <Badge variant="default" className="text-xs">
64              Tailwind
65            </Badge>
66            <Badge variant="default" className="text-xs">
67              GSAP
68            </Badge>
69          </div>
70        </div>
71      </div>
72    </CardWrapper>
73  );
74};
75
76export default Brainwave;
77

What I've Tried:

I’ve applied pointer-events-none to the draggable container, which I thought would allow the link to be clickable.
I also added pointer-events-auto to the link container, but it still doesn't work.

Question:

Why is the link not clickable even after applying pointer-events-none and pointer-events-auto? How can I fix this so the link inside the draggable container is clickable?

What I Expect:

I want the link inside the draggable container to remain clickable even when the container is being dragged.