Recommendation for using React-Color with Formik

[k-wolf-dev]

Hi,

We want to use React-Color as part of a Formik form.

Formik is not picking up the change values & using onChangeComplete is causing a crash. Does seem related to the onChange interactions between Formik and React-Color.

Any guidance or sample code woudl be appreciated since we'd really like to use React-Color versus trying to write our own. (We liked the palette picker)

Our implementation is below:

const FormikColorPicker = memo(({
    label, description, key, id, name, hidden, colors, width, ...props
}) => {
    const { handleBlur, handleChange, setFieldValue } = useFormikContext();
    const [field] = useField(name);
    const onCompleteFunc = (color, e) => {    
        setFieldValue(field.name, color.hex);
    };

return (
        <React.Fragment key={key || id || name}>
            <Form.Group hidden={hidden} className="mb-2">
                <Form.Label htmlFor={id || name}>
                    {label}
                </Form.Label>
                <TwitterPicker
                  {...props}
                  {...field}
                  color={field.value}
                  colors={colors}
                  width={width}
                  onChangeComplete={onCompleteFunc}
                  onBlur={handleBlur(id || name)}
                />
                {description && <Form.Text>{description}</Form.Text>}
            </Form.Group>
        </React.Fragment>

Thanks!