title: Formik custom color picker
body: <p>i'm trying to create a custom color picker with formik form</p>
  
  <p>the probleme her is that parent component color are not changed : </p>
  
  <pre><code>import {SketchPicker} from "react-color";
  
  export const MyColorPicker = ({label, ...props}) =&gt; {
    // 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 =&gt; {
      setColor(color.hex);
      field.onChange(color.hex);
    };
    const onComplete = color =&gt; {
      setColor(color.hex);
      field.onChange(color.hex);
    };
    return (
      &lt;div style={{padding: 10}}&gt;
        &lt;label&gt;{label}&lt;/label&gt;
        &lt;SketchPicker {...props} {...field} color={color} onChange={handleChange} onChangeComplete={onComplete} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>as exemple this work : </p>
  
  <pre><code>export const MyTextAreaField = ({label, ...props}) =&gt; {
  const [field, meta] = useField(props);
  
    if (field &amp;&amp; field.value === null) {
      field.value = "";
    }
    return (
      &lt;div style={{display: "flex", flexDirection: "column"}}&gt;
        &lt;label className="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"&gt;
          {label}
        &lt;/label&gt;
  
        &lt;TextareaAutosize
          rows={10}
          {...field}
          {...props}
          style={{marginTop: 10, fontFamily: "Helvetica Neue", fontSize: 15}}
        /&gt;
        {meta.touched &amp;&amp; meta.error ? &lt;div className="error"&gt;{meta.error}&lt;/div&gt; : null}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <ul>
  <li><p>and parent code : </p>
  
  <pre><code>&lt;Formik
    initialValues={{
      data: { title :'', shortDescription:'', description:'', color:'')
    }}
    onSubmit={values =&gt; {
     console.log(values.data) ; // data.color stay null 
    }}&gt;
    &lt;Form&gt;
       &lt;MyTextAreaField id="data.description" name="data.description" label={t("PROJECT.DESCRIPTION")} /&gt;
  
       &lt;MyColorPicker id="data.color" label={t("PROJET.COLOR")} name="data.color" /&gt;
    &lt;/Form&gt;
  &lt;/Formik&gt;   
  </code></pre></li>
  </ul>