React color ChromePicker alpha slider does not work. Is required use Alpha individual API?

The problem is that react-color components (like the ChromePicker you are using) do not accept properties for alpha/opacity directly. You have two options:

1. Using the color.rgb value only, and don't separate the alpha. If you pass the rgb object as the color property), it should work as expected.
2. You can take the color.rgb.a value, convert it to hex, and append it to the color.hex string.

color.hex doesn't contain the alpha value. you can you color.rgba instead, and also you can convert it to hex with rgb-hex package to make it displayable:

import { ChromePicker } from "react-color";
import rgbHex from "rgb-hex";
const App = () => {
  const [color, setColor] = useState("#fff");
  return <>
    <ChromePicker
      color={color}
      onChange={c =>
        setColor("#" + rgbHex(c.rgb.r, c.rgb.g, c.rgb.b, c.rgb.a))
      }
    />
    <p>You picked {color}</p>
  </>
}