Formik custom color picker
i'm trying to create a custom color picker with formik form

the probleme her is that parent component color are not changed : 


    import {SketchPicker} from "react-color";

    export const MyColorPicker = ({label, ...props}) => {
      // with useField is should not use onChange but i get an error without defining it myself
      const [field] = useField(props);
      const [color, setColor] = useState("#333");
      const handleChange = color => {
        setColor(color.hex);
        field.onChange(color.hex);
      };
      const onComplete = color => {
        setColor(color.hex);
        field.onChange(color.hex);
      };
      return (
        <div style={{padding: 10}}>
          <label>{label}</label>
          <SketchPicker {...props} {...field} color={color} onChange={handleChange} onChangeComplete={onComplete} />
        </div>
      );
    };


as exemple this work : 

    export const MyTextAreaField = ({label, ...props}) => {
    const [field, meta] = useField(props);

      if (field && field.value === null) {
        field.value = "";
      }
      return (
        <div style={{display: "flex", flexDirection: "column"}}>
          <label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled">
            {label}
          </label>
          
          <TextareaAutosize
            rows={10}
            {...field}
            {...props}
            style={{marginTop: 10, fontFamily: "Helvetica Neue", fontSize: 15}}
          />
          {meta.touched && meta.error ? <div className="error">{meta.error}</div> : null}
        </div>
      );
    };


and parent code : 


        <Formik
          initialValues={{
            data: { title :'', shortDescription:'', description:'', color:'')
          }}
          onSubmit={values => {
           console.log(values.data) ; // data.color stay null 
          }}>
          <Form>
             <MyTextAreaField id="data.description" name="data.description" label={t("PROJECT.DESCRIPTION")} />
                
             <MyColorPicker id="data.color" label={t("PROJET.COLOR")} name="data.color" />
          </Form>
        </Formik>   
                 

any idea?
thanks 