Slow carousel on drag - Nextjs 13.5.6

[proccedure-caze]

Hello! I have already implemented before carousels using keen-slider but this time it has a strange behavior and I don't know what's the cause.

Here is the implementation (It is a client component that receives the array of data as props)

  const [sliderRef] = useKeenSlider<HTMLDivElement>({
    initial: 0,
    renderMode: "performance",
    mode: "free-snap",
    slides: {
      perView: 8.4,
      spacing: 12,
    },
  });

...
<div ref={sliderRef} className="keen-slider flex items-center">
        {categories.map((category) => {
          return (
            <button
              key={category.id}
              data-active={selectedCategories.includes(
                category.name.toLowerCase(),
              )}
              onClick={() => handleToggleCategory(category.name.toLowerCase())}
              className="keen-slider__slide rounded-full px-4 py-1 transition-all border border-purple100 text-purple100 data-[active='true']:border-purple200 data-[active='true']:bg-purple200 data-[active='true']:text-gray100"
            >
              {category.name}
            </button>
          );
        })}
      </div>

And these are my dependencies:

Deps:

"dependencies": {
    "@phosphor-icons/react": "^2.0.10",
    "@prisma/client": "^5.6.0",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.5",
    "@types/node": "20.4.4",
    "@types/react": "18.2.15",
    "@types/react-dom": "18.2.7",
    "dayjs": "^1.11.9",
    "eslint": "8.45.0",
    "eslint-config-next": "13.4.12",
    "keen-slider": "^6.8.6",
    "next": "13.5.6",
    "next-auth": "^4.22.3",
    "nookies": "^2.5.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-intersection-observer": "^9.5.3",
    "tailwind-merge": "^1.14.0",
    "typescript": "5.1.6",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@rocketseat/eslint-config": "^2.1.0",
    "@types/uuid": "^9.0.2",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.27",
    "prisma": "^5.0.0",
    "tailwindcss": "^3.3.3"
  }

Here is a video of the slider:

https://github.com/rcbyr/keen-slider/assets/114543712/5b79a4f0-0828-4ddb-9716-b5b51df16c1e

[proccedure-caze]

I changed it to an image and it works normally, I tried removing everything and leaving just the button class to see if it was that but it still lags. I also tried using another tag other than button.

<div ref={sliderRef} className="keen-slider flex items-center">
        {categories.map((category) => {
          return (
            // <button
            //   key={category.id}
            //   data-active={selectedCategories.includes(
            //     category.name.toLowerCase(),
            //   )}
            //   style={{ minWidth: "fit-content" }}
            //   onClick={() => handleToggleCategory(category.name.toLowerCase())}
            //   className="keen-slider__slide rounded-full px-4 py-1 transition-all border border-purple100 text-purple100 data-[active='true']:border-purple200 data-[active='true']:bg-purple200 data-[active='true']:text-gray100"
            // >
            //   {category.name}
            // </button>
            <Image
              key={category.id}
              alt=""
              src="/assets/logo.svg"
              width={0}
              height={0}
              className="w-auto h-auto keen-slider__slide"
            />
          );
        })}

[proccedure-caze]

Found out it was the transition-all property, changing it to transition-colors solved the laggyness issue.