Is it possible to simple-react-code-editor as a Formik field component?

Question

Trying to get this form field component to take a simple-react-code-editor:

not sure if I'm going about this the right way by trying to pass props form the useField hook, but it works for textfield tags, so thought the same method could apply to this as well. Although, I get the feeling the onValueChange callback is different from the onChange callback that this component doesn't have. Is there a way to add it somehow?

Editor Component:

const MyEditor = ({value, onChange}) => {

  const highlight = (value) => {
    return(
      <Highlight {...defaultProps} theme={theme} code={value} language="sql">
        {({ tokens, getLineProps, getTokenProps }) => (
          <>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </>
        )}
      </Highlight>
    )
  };

  return (
    <Editor
      value={value}
      onValueChange={onChange}
      highlight={highlight}
      padding={'40px'}
      style={styles.root}
    />
  );
}

export default MyEditor;

Form with Field Component as MyEditor (tried using useField hook):

const FormQueryTextBox = ({...props}) => {

    const [field] = useField(props);

    return (
        <MyEditor onChange={field.onChange} value={field.value}/>
    )
}

const validationSchema = yup.object({
    query_name: yup
        .string()
        .required()
        .max(50)
});

const AddQueryForm = () => {
    return (
        <div>
            <Formik
                validateOnChange={true}
                initialValues={{
                    query:""
                }}
                validationSchema={validationSchema}
                onSubmit={(data, { setSubmitting }) => {
                    console.log(data);
                }}
            >
                {() => (
                    <Form>
                        <div>
                            <Field
                                placeholder="query name"
                                name="query_name"
                                type="input"
                                as={TextField}
                            />
                        </div>
                        <div>
                            <Field
                                name="query"
                                type="input"
                                as={FormQueryTextBox}
                            />
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

components render without errors, but as I type the text doesn't appear.

Answer 1

I figured out that I just need to customize my onChange with the setter from the useFormikContext hook like this:

const FormQueryTextBox = ({...props}) => {

    const [field] = useField(props);
    const { setFieldValue } = useFormikContext();

    return (
        <MyEditor {...field} {...props} onChange={val => {
            setFieldValue(field.name, val)
        }}/>
    )
}