Calendar DayPicker Nav_button can't navigate because z-index

[nomoreyesterday]

From document

function Calendar({
  className,
  classNames,
  showOutsideDays = false,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3 animate-fadeinfast", className)}

      classNames={{
        nav_button_previous: "absolute left-1 ",
        nav_button_next: "absolute right-1",

      components={{
        IconLeft: ({ ...props }) => (
          <ChevronLeftIcon className="h-4 w-4" />
        ),
        IconRight: ({ ...props }) => (
          <ChevronRightIcon className="h-4 w-4" />
        ),
      }}
      {...props}
    />
  );
}

The problem is when click on nav_previous and nav_next is not working because

components={{
        IconLeft: ({ ...props }) => (
          <ChevronLeftIcon className="h-4 w-4" />
        ),
        IconRight: ({ ...props }) => (
          <ChevronRightIcon className="h-4 w-4" />
        ),
      }}

maybe we can change z-index or group button?

classNames={{
        nav_button_previous: "absolute left-1 hover:opacity-50",
        nav_button_next: "absolute right-1 hover:opacity-50",

      components={{
        IconLeft: ({ ...props }) => (
          <ChevronLeftIcon className="h-4 w-4 z-[-1]" />
        ),
        IconRight: ({ ...props }) => (
          <ChevronRightIcon className="h-4 w-4 z-[-1]" />
        ),
      }}