Using extendVariants in RSC cause error and why import from /react?

[J4v4Scr1pt]

I have the need to extend some components with our own colors and followed the guide.
First of the button needs to have the 'use client' directive to be used in a RSC otherwise I get this error:
Error: Cannot access displayName.toString on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.
This breaks this part of the docs..
Maybe not the biggest issue tough because the button will prob be used in a client component anyways.. but still.

And why do we need to import extendVariants from /react but the docs states that it should be avoided?

This is the button:

'use client'
import { Button } from '@nextui-org/button';
import { extendVariants } from '@nextui-org/react';

export const WtButton = extendVariants(Button, {
	variants: {
		variant: {
			base: 'relative flex cursor-pointer flex-row items-center justify-center rounded-full border-2 border-solid normal-bold capitalize text-white',
		},
		color: {
			primary:
				'border-purple bg-purple hover:border-[#902baa] hover:bg-[#902baa] active:border-[#902baa] active:bg-[#902baa]',
			primaryInverse:
				'border-jungle bg-jungle hover:border-[#00ccb9] hover:bg-[#00ccb9] active:border-[#00ccb9] active:bg-[#00ccb9]',
		},
		isDisabled: {
			true: 'bg-[#eaeaea] text-[#000] opacity-50 cursor-not-allowed',
		},
		size: {
			sm: 'h-6 px-3 py-0',
			md: 'h-8 px-4 py-0',
			lg: 'h-10 px-4 py-0',
		},
	},
	defaultVariants: {
		variant: 'base',
		color: 'primary',
		size: 'md',
	},
});

[elanclarkson]

I too have this issue, except I do want to use it in a server component. :(

[kofeinstyle]

@J4v4Scr1pt You can use something like that instead or /react:

import { extendVariants } from '@heroui/system'