Color pointer not resetting after color change

[grantspilsbury]

I am trying to reset the color pointer button after I click a button but the pointer remains the previously selected color.

In the example below I expect the color pointer to change to white (not green, and be in the correct position) after the Set button is clicked.

const Panel = () => {
  const [color, setColor] = useState('white')
  const handleColorChange = (color) => setColor(color)

  return (
    <>
      <HexColorPicker color={color} onChange={handleColorChange} />
      <button onClick={() => setColor('white')}>
          Set
      </button>
    </>
  )
}
export default Panel

What am I doing wrong?

[GabrielModog]

Hi Grant! Are you good? Hope you going well!

This can be solved by adding hex color instead of the color name. You are importing a component that handles with hex color only.

const Panel = () => {
  const [color, setColor] = useState("#ffffff");
  const handleColorChange = (color) => setColor(color)

  return (
    <>
      <HexColorPicker color={color} onChange={handleColorChange} />
       <button onClick={() => setColor("#ffffff")}>Reset</button>
    </>
  )
}
export default Panel