React and ShadcnUI how to make a whole card clickable to change a radioGroup

export function CarCardIndividual({ className, ...props }: CardProps) {
  return (
    <Card className={cn("w-[380px]", className)} {...props}>
      <CardHeader>
        <CardTitle>{props.cardTitle}</CardTitle>
        <CardDescription>You have 3 unread messages.</CardDescription>
      </CardHeader>
      <CardContent className="grid gap-4">
        <div>
          {notifications.map((notification, index) => (
            <div
              key={index}
              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
            >
              <span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
              <div className="space-y-1">
                <p className="text-sm font-medium leading-none">
                  {notification.title}
                </p>
              </div>
            </div>
          ))}
          <Image
            src="https://www.shutterstock.com/image-photo/yellow-taxi-car-roof-sign-260nw-1918057085.jpg"
            alt="individual car"
            width={380}
            height={200}
          />
        </div>
      </CardContent>
      <CardFooter className="items-center justify-center">
        <RadioGroupItem value={props.value} id={props.id} />
      </CardFooter>
    </Card>
  );
}