react-color Cannot read property 'value' of undefined

(Kind of new in react) Im trying to implement react-color as a functional component in a project but im not being able to change the color. all displays nicely but when I try to change color I get the error:

TypeError: Cannot read property 'value' of undefined

I tried changing to a class component instead and it worked kind of better but I also get a very similar error. Some ideas?

import React from 'react';
import {FieldUpdating} from './FieldUpdating';
import {FieldUpdateError} from './FieldUpdateError';
import {ColorBox} from '../components/ColorBox';
import {ChromePicker} from 'react-color';

export function ColorEditor({label, value, setValue, updating, updateError}) {

return (
<div className="label-input mb-2 form-group">
  <label>{label}:</label>
  {value} //tried to get the value that displays as a string hex (hex string displays correct)
    <ChromePicker
      color={value}
      value={value}
      onChange={e => {
        setValue(e.target.value);
      }}
    />
  <input value={value}/>

  {updating && <FieldUpdating />}
  {updateError && <FieldUpdateError error={updateError} />}
  <ColorBox color={value} />
</div>
);
}

You're just doing it wrong. Apparently you're trying to access e.target.value, while e returns something like :

{
  "hsl": {
    "h": 0,
    "s": 0.5626318818338767,
    "l": 0.648956228956229,
    "a": 1
  },
  "hex": "#d87373",
  "rgb": {
    "r": 216,
    "g": 115,
    "b": 115,
    "a": 1
  },
  "hsv": {
    "h": 0,
    "s": 0.46666666666666656,
    "v": 0.8464646464646465,
    "a": 1
  },
  "oldHue": 0,
  "source": "rgb"
}

So basically what you need to do is accesse.hex like the following :

<ChromePicker
      color={value}
      value={value}
      onChange={e => {
        setValue(e.hex);
      }}
    />

Or like (use destructuring):

<ChromePicker
      color={value}
      value={value}
      onChange={({hex}) => {
        setValue(hex);
      }}
    />