Radix UI tips

export function BackgroundColor() {
  return (
    <div>
      // ✅ Lift it here
      <TooltipProvider>
        <ul className="flex flex-wrap gap-x-6 gap-y-4">
          {COLORS.map(({ name, className, hex }) => (
            <li key={name}>
              // ❌ Don't use TooltipProvider here
              <Tooltip>
                <TooltipTrigger
                  className={clsx(
                    'h-7 w-7 rounded-sm border',
                    FOCUS_RING_ERROR_SHADOW_XS,
                    className,
                  )}
                  type="button"
                />
                <TooltipContent>
                  <p className="pb-1.5 text-xs font-medium text-gray-500">
                    {name}
                  </p>
                  <p className="text-sm font-semibold text-gray-600">{hex}</p>
                </TooltipContent>
              </Tooltip>
            </li>
          ))}
        </ul>
      </TooltipProvider>
    </div>
  );
}