Preact useState function not found after first click

[thesobercoder]

I'm trying to follow the instructions from this tutorial - shadcn/ui. Created the button component from the library and started noticing the following.

The button component loses the reference to setCount function after the first click. Here is the error I'm getting after the first click.

Here is my import_map.json -

{
  "imports": {
    "$fresh/": "https://deno.land/x/[email protected]/",
    "preact": "https://esm.sh/[email protected]",
    "preact/": "https://esm.sh/[email protected]/",
    "preact-render-to-string": "https://esm.sh/*[email protected]",
    "@preact/signals": "https://esm.sh/*@preact/[email protected]",
    "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
    "twind": "https://esm.sh/[email protected]",
    "twind/": "https://esm.sh/[email protected]/",
    "@radix-ui/react-compose-refs": "https://esm.sh/@radix-ui/[email protected]?alias=react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,react-dom:preact/compat&[email protected]",
    "@radix-ui/react-slot": "https://esm.sh/@radix-ui/[email protected]?alias=react:preact/compat,react/jsx-runtime:preact/compat/jsx-runtime,@types/react:preact/compat,react-dom:preact/compat&[email protected]",
    "class-variance-authority": "https://esm.sh/[email protected]",
    "clsx": "https://esm.sh/[email protected]",
    "tailwind-merge": "https://esm.sh/[email protected][email protected]",
    "lucide-preact": "https://esm.sh/[email protected]&[email protected]",
    "@/": "./"
  }
}

Here is the button.tsx component -

import { JSX } from "preact";
import { forwardRef } from "preact/compat";
import { Slot } from "@radix-ui/react-slot";
import { cva, VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils.ts";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
);

export interface ButtonProps
  extends
    Omit<JSX.HTMLAttributes<HTMLButtonElement>, "size">,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { class: className, variant, size, asChild = false, ...props },
    ref,
  ) => {
    const Comp = asChild ? Slot : "button";
    return (
      <Comp
        class={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  },
);
Button.displayName = "Button";

export { Button, buttonVariants };

Here is how I'm calling it from the counter.tsx component -

import { useCallback, useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts";
import { Button } from "@/components/ui/button.tsx";
import { Mail } from "lucide-preact";

interface CounterProps {
  start: number;
}

export default function Counter(props: CounterProps) {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  const decrement = useCallback(() => {
    setCount(count - 1);
  }, [count]);

  return (
    <div class="flex gap-2 w-full">
      <p class="flex-grow-1 font-bold text-xl">{count}</p>
      <Button disabled={!IS_BROWSER} onClick={decrement}>-1</Button>
      <Button disabled={!IS_BROWSER} onClick={increment}>+1</Button>
    </div>
  );
}

Edit: 1

After further investigation, I found out that the main issue is with the Slot component from the @radix-ui/react-slot library. If I replace the Slot component with a standard button, then everything works as expected.

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    { class: className, variant, size, asChild = false, ...props },
    ref,
  ) => {
    //const Comp = asChild ? Slot : "button";
    return (
      <button
        class={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    );
  },
);

Any idea if this is something that can be resolved at all; otherwise I'd have to look for other libraries. Also, are there any recommended UI library to use with Fresh/Preact/Twind. The most popular component libraries are incompatible with, at least one of these technologies.