[BUG] - Default variants with extendVariants get unset on re-render.

[ariesclark]

NextUI Version

2.3.6 (tested on 0.0.0-canary-20240513132504 (May 13th, 2024) too)

Describe the bug

When using extendVariants from @nextui-org/react on any component with a defaultVariants set, the default variant is unset for all other components on the same page on a re-render.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

"use client"

import { useState } from "react";
import { Button, extendVariants } from "@nextui-org/react";

const Foo = extendVariants(Button, {
  variants: {
    bar: {
      baz: "border-red-500 border-2",
      qux: "border-blue-500 border-2"
    }
  },
  defaultVariants: {
    bar: "baz"
  }
});

export function Example() {
  const [value, setValue] = useState(0);

  return (
    <div className="flex flex-col gap-2">
      <span>
        Clicked {value} time{value === 1 ? "" : "s"}
      </span>
      <div className="flex gap-2">
        <Foo
          // bar="baz" // default variant, shouldn't need to be explicit.
          // the `bar="baz"` default is unset on re-render, causing the button to lose its border.
          onPress={() => setValue((value) => value + 1)}
        >
          Plus
        </Foo>
        <Foo
          // the above bug only occurs when an explicit variant is set & rendered anywhere on the page.
          bar="qux" // an explicit variant, works.
          onPress={() => setValue((value) => value - 1)}
        >
          Minus
        </Foo>
      </div>
    </div>
  );
}

Expected behavior

The default variant should not be unset.

Screenshots or Videos

1670e214636660e2.mp4

Operating System Version

Windows

Browser

Firefox

[linear]

ENG-842 [BUG] - Default variants with ``extendVariants`` get unset on re-render.