Can't use route interception when using isPressable

[hoxito]

Folder structure

On page.tsx I have

<section>
            <div className="home__cars-wrapper">
              {allMatches?.map((match:any) => (
               <Link  href={`/match/${match.id}`}>
                <CardComponnent match={match} key={match.id}  />
                </Link>
              ))}
            </div>
          </section>

This is my CardComponent

"use client";
import React, { useState } from "react";
import {statusColorMap} from '@/utils'
import { Match } from "@/models/match";
import {Card, CardFooter, Image, Button, CardHeader, Chip, Link} from "@nextui-org/react";
interface CardProps {
  match: Match;
  key: string; 
}
const CardComponnent = ({match}:CardProps) => {
  const { id, match_status_text, teams, datetime } = match;
  const [isOpen,setIsOpen] = useState(false)
  return ( 
      <Card
        isFooterBlurred
        radius="sm"
        className="border-none  h-[300px] hover:scale-105 bg-gray-300	hover:bg-neutral-100	"
        isHoverable={true}
        isPressable={false}
        
      >    
        <div  className="z-0 w-full h-full  bg-gradient-to-r from-black hover:bg-gradient-to-r from-white object-cover " >
        <CardHeader className=" z-10 top-1 flex-col ">
          <h4 className=" font-medium text-large">  {teams[0].team_name} vs {teams[1].team_name}</h4>
        </CardHeader>
        <div className="grid grid-cols-2 gap-4">
              <Image
                src={teams[0].media}
                className="object-contain"
                alt="match model"
              />
              <Image
                src={teams[1].media}
                className="object-contain"
                alt="match model"
              />
        </div>
        <div className="grid grid-cols-2 gap-4">
        <p>odds1</p>
        <p>odds2</p>
        </div>
        </div>
        <CardFooter className="justify-between  before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
        <Chip color={statusColorMap[match_status_text] ||"default"}>{match_status_text}</Chip> 
        <p className="flex  text-[12px]">{datetime}</p>
        </CardFooter>
      </Card> 
    
    
  );
};

export default CardComponnent;

it only works when I set
isPressable={false}
otherwise if its true it wont intercept the route showing me the page not the modal.

[nicmosc]

@hoxito can you make this an issue? Looks like it's a bug, I encountered the same issue

[hoxito]

sure!