ColorPicker uncontrolled issue

[airfortech]

Describe the bug
Maybe i am using it wrong but have error:
A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Code

"use client";

import { useEffect, useState } from "react";
import {
  ColorPicker as KiboColorPicker,
  ColorPickerAlpha,
  ColorPickerEyeDropper,
  ColorPickerFormat,
  ColorPickerHue,
  ColorPickerOutput,
  ColorPickerSelection,
} from "@/components/ui/kibo-ui/color-picker/index_temp";
import { ColorLike } from "color";

interface Props {
  currentColor?: string;
}

export const ColorPicker = ({ currentColor = "#2f4ecbb5" }: Props) => {
  const [color, setColor] = useState<ColorLike>(currentColor);

  useEffect(() => {
    // console.log("Selected picker color:", color);
  }, [color]);

  return (
    <div className="fixed top-14">
      <KiboColorPicker
        className="max-w-sm h-100 rounded-md border bg-background p-4 shadow-sm"
        value={color}
        defaultValue={currentColor}
        onChange={setColor}
      >
        <ColorPickerSelection />
        <div className="flex items-center gap-4">
          <ColorPickerEyeDropper />
          <div className="grid w-full gap-1">
            <ColorPickerHue />
            <ColorPickerAlpha />
          </div>
        </div>
        <div className="flex items-center gap-2">
          <ColorPickerOutput />
          <ColorPickerFormat />
        </div>
      </KiboColorPicker>
    </div>
  );
};