diff --git a/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js b/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js
index 1ee3f3cc..33c3a10d 100644
--- a/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js
+++ b/public/components/FormControls/FormikInputWrapper/FormikInputWrapper.js
@@ -18,7 +18,9 @@ import PropTypes from 'prop-types';
 import { Field } from 'formik';
 
 const FormikInputWrapper = ({ name, fieldProps, render }) => (
-  <Field name={name} {...fieldProps} render={({ field, form }) => render({ field, form })} />
+  <Field name={name} {...fieldProps}>
+    {({ field, form }) => render({ field, form })}
+  </Field>
 );
 
 FormikInputWrapper.propTypes = {
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js
index 79264bdb..ddda5275 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/MonitorExpressions.test.js
@@ -23,10 +23,9 @@ import MonitorExpressions from './MonitorExpressions';
 describe('MonitorExpressions', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
-      />
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {() => <MonitorExpressions onRunQuery={() => {}} dataTypes={[]} ofEnabled={false} />}
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js
index 0ba8bbe3..c67f5df8 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/ForExpression.test.js
@@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('ForExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <ForExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
@@ -34,7 +33,7 @@ describe('ForExpression', () => {
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js
index 146b6866..2acb29ba 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OfExpression.test.js
@@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('OfExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <OfExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
@@ -35,7 +34,7 @@ describe('OfExpression', () => {
             dataTypes={[]}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js
index 18fda09d..920376d3 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/OverExpression.test.js
@@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('OverExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <OverExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
@@ -34,7 +33,7 @@ describe('OverExpression', () => {
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js
index a62f07cf..8d192d9e 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhenExpression.test.js
@@ -24,9 +24,8 @@ import { DEFAULT_CLOSED_STATES } from '../MonitorExpressions';
 describe('WhenExpression', () => {
   test('renders', () => {
     const component = (
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={props => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {(props) => (
           <WhenExpression
             formik={props}
             openedStates={DEFAULT_CLOSED_STATES}
@@ -34,7 +33,7 @@ describe('WhenExpression', () => {
             closeExpression={() => {}}
           />
         )}
-      />
+      </Formik>
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js
index 2adca2d3..e3d00eec 100644
--- a/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js
+++ b/public/pages/CreateMonitor/components/MonitorExpressions/expressions/WhereExpression.test.js
@@ -31,9 +31,8 @@ const dataTypes = {
 const openExpression = jest.fn();
 const closeExpression = jest.fn();
 const getMountWrapper = (state = false) => (
-  <Formik
-    initialValues={FORMIK_INITIAL_VALUES}
-    render={(props) => (
+  <Formik initialValues={FORMIK_INITIAL_VALUES}>
+    {(props) => (
       <WhereExpression
         formik={props}
         dataTypes={dataTypes}
@@ -43,7 +42,7 @@ const getMountWrapper = (state = false) => (
         onMadeChanges={jest.fn()}
       />
     )}
-  />
+  </Formik>
 );
 
 describe('WhereExpression', () => {
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
index 514ba6df..9034e2fd 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Daily.js
@@ -22,9 +22,8 @@ import TimezoneComboBox from './TimezoneComboBox';
 const Daily = () => (
   <EuiFlexGroup direction="column" style={{ paddingLeft: '10px', marginTop: '5px' }}>
     <EuiFlexItem style={{ marginTop: '0px' }}>
-      <Field
-        name="daily"
-        render={({
+      <Field name="daily">
+        {({
           field: { value, onChange, onBlur, ...rest },
           form: { touched, errors, setFieldValue },
         }) => (
@@ -32,10 +31,8 @@ const Daily = () => (
             <EuiDatePicker
               showTimeSelect
               showTimeSelectOnly
-              selected={moment()
-                .hours(value)
-                .minutes(0)}
-              onChange={date => {
+              selected={moment().hours(value).minutes(0)}
+              onChange={(date) => {
                 setFieldValue('daily', date.hours());
               }}
               dateFormat="hh:mm A"
@@ -44,7 +41,7 @@ const Daily = () => (
             />
           </EuiFormRow>
         )}
-      />
+      </Field>
     </EuiFlexItem>
     <EuiFlexItem style={{ marginTop: '0px' }}>
       <TimezoneComboBox />
diff --git a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
index f195e968..bb2c3469 100644
--- a/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
+++ b/public/pages/CreateMonitor/components/Schedule/Frequencies/Weekly.js
@@ -28,7 +28,7 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
       id={day}
       label={_.startCase(day)}
       checked={checked}
-      onChange={e => {
+      onChange={(e) => {
         setFieldValue(`weekly.${day}`, e.target.checked);
       }}
       onBlur={() => setFieldTouched('weekly')}
@@ -37,17 +37,15 @@ const checkboxFlexItem = (day, checked, setFieldValue, setFieldTouched) => (
   </EuiFlexItem>
 );
 
-const validate = value => {
+const validate = (value) => {
   const booleans = Object.values(value);
-  if (!booleans.some(bool => bool)) return 'Must select at least one weekday';
+  if (!booleans.some((bool) => bool)) return 'Must select at least one weekday';
 };
 
 const Weekly = () => (
   <Fragment>
-    <Field
-      name="weekly"
-      validate={validate}
-      render={({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
+    <Field name="weekly" validate={validate}>
+      {({ field: { value }, form: { touched, errors, setFieldValue, setFieldTouched } }) => (
         <EuiFormRow
           label="Every"
           isInvalid={touched.weekly && !!errors.weekly}
@@ -55,11 +53,11 @@ const Weekly = () => (
           style={{ paddingLeft: '10px', marginTop: '5px' }}
         >
           <EuiFlexGroup alignItems="center">
-            {days.map(day => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
+            {days.map((day) => checkboxFlexItem(day, value[day], setFieldValue, setFieldTouched))}
           </EuiFlexGroup>
         </EuiFormRow>
       )}
-    />
+    </Field>
     <Daily />
   </Fragment>
 );
diff --git a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js
index a03cc304..5bd11a26 100644
--- a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js
+++ b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/AnomalyDetector.test.js
@@ -29,12 +29,11 @@ const renderEmptyMessage = jest.fn();
 function getMountWrapper() {
   return mount(
     <CoreContext.Provider value={{ http: httpClientMock }}>
-      <Formik
-        initialValues={FORMIK_INITIAL_VALUES}
-        render={({ values }) => (
+      <Formik initialValues={FORMIK_INITIAL_VALUES}>
+        {({ values }) => (
           <AnomalyDetectors values={values} renderEmptyMessage={renderEmptyMessage} />
         )}
-      />
+      </Formik>
     </CoreContext.Provider>
   );
 }
diff --git a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
index 9ad6afe6..a89b7263 100644
--- a/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
+++ b/public/pages/CreateMonitor/containers/AnomalyDetectors/__tests__/__snapshots__/AnomalyDetector.test.js.snap
@@ -53,7 +53,6 @@ exports[`AnomalyDetectors renders 1`] = `
       },
     }
   }
-  render={[Function]}
 >
   <AnomalyDetectors
     renderEmptyMessage={[MockFunction]}
@@ -156,7 +155,6 @@ exports[`AnomalyDetectors renders 1`] = `
         >
           <Field
             name="detectorId"
-            render={[Function]}
             validate={[Function]}
           >
             <FormikFormRow
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
index f9e5bfff..32926c73 100644
--- a/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
+++ b/public/pages/CreateMonitor/containers/CreateMonitor/CreateMonitor.js
@@ -133,11 +133,8 @@ export default class CreateMonitor extends Component {
     const { edit, httpClient, monitorToEdit, notifications, isDarkMode } = this.props;
     return (
       <div style={{ padding: '25px 50px' }}>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={this.onSubmit}
-          validateOnChange={false}
-          render={({ values, errors, handleSubmit, isSubmitting, isValid }) => (
+        <Formik initialValues={initialValues} onSubmit={this.onSubmit} validateOnChange={false}>
+          {({ values, errors, handleSubmit, isSubmitting, isValid }) => (
             <Fragment>
               <EuiTitle size="l">
                 <h1>{edit ? 'Edit' : 'Create'} monitor</h1>
@@ -182,7 +179,7 @@ export default class CreateMonitor extends Component {
               />
             </Fragment>
           )}
-        />
+        </Formik>
       </div>
     );
   }
diff --git a/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap b/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap
index af59115e..59ec5a38 100644
--- a/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap
+++ b/public/pages/CreateMonitor/containers/CreateMonitor/__snapshots__/CreateMonitor.test.js.snap
@@ -61,8 +61,9 @@ exports[`CreateMonitor renders 1`] = `
       }
     }
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
-  />
+  >
+    <Component />
+  </Formik>
 </div>
 `;
diff --git a/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js b/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js
index 78d02f6d..746ba719 100644
--- a/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js
+++ b/public/pages/CreateMonitor/containers/MonitorIndex/MonitorIndex.test.js
@@ -31,10 +31,9 @@ const runAllPromises = () => new Promise(setImmediate);
 
 function getMountWrapper(customProps = {}) {
   return mount(
-    <Formik
-      initialValues={FORMIK_INITIAL_VALUES}
-      render={() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
-    />
+    <Formik initialValues={FORMIK_INITIAL_VALUES}>
+      {() => <MonitorIndex httpClient={httpClientMock} {...customProps} />}
+    </Formik>
   );
 }
 
diff --git a/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap b/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
index e5c9a89c..f7ce8dce 100644
--- a/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
+++ b/public/pages/CreateMonitor/containers/MonitorIndex/__snapshots__/MonitorIndex.test.js.snap
@@ -53,7 +53,6 @@ exports[`MonitorIndex renders 1`] = `
       },
     }
   }
-  render={[Function]}
 >
   <MonitorIndex
     httpClient={[MockFunction]}
@@ -113,7 +112,6 @@ exports[`MonitorIndex renders 1`] = `
       >
         <Field
           name="index"
-          render={[Function]}
           validate={[Function]}
         >
           <FormikFormRow
diff --git a/public/pages/CreateTrigger/components/Action/actions/Message.test.js b/public/pages/CreateTrigger/components/Action/actions/Message.test.js
index 8935ae9a..50931769 100644
--- a/public/pages/CreateTrigger/components/Action/actions/Message.test.js
+++ b/public/pages/CreateTrigger/components/Action/actions/Message.test.js
@@ -23,8 +23,8 @@ jest.mock('@elastic/eui/lib/components/form/form_row/make_id', () => () => 'test
 
 function getRenderWrapper(customProps = {}) {
   return render(
-    <Formik
-      render={() => (
+    <Formik>
+      {() => (
         <Message
           action={{
             message_template: {
@@ -39,7 +39,7 @@ function getRenderWrapper(customProps = {}) {
           setFlyout={jest.fn()}
         />
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
index 2c69c8c6..1fbf4c83 100644
--- a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
+++ b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.js
@@ -67,9 +67,8 @@ class TriggerExpressions extends Component {
           }}
         >
           <EuiFlexItem grow={false} style={{ width: 150 }}>
-            <Field
-              name={keyFieldName}
-              render={({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
+            <Field name={keyFieldName}>
+              {({ field: { onBlur, ...rest }, form: { touched, errors } }) => (
                 <EuiFormRow
                   isInvalid={touched.thresholdEnum && !!errors.thresholdEnum}
                   error={errors.thresholdEnum}
@@ -77,13 +76,12 @@ class TriggerExpressions extends Component {
                   <EuiSelect options={THRESHOLD_ENUM_OPTIONS} {...rest} />
                 </EuiFormRow>
               )}
-            />
+            </Field>
           </EuiFlexItem>
 
           <EuiFlexItem grow={false} style={{ width: 100 }}>
-            <Field
-              name={valueFieldName}
-              render={({ field, form: { touched, errors } }) => (
+            <Field name={valueFieldName}>
+              {({ field, form: { touched, errors } }) => (
                 <EuiFormRow
                   style={{ paddingLeft: '10px' }}
                   isInvalid={touched.thresholdValue && !!errors.thresholdValue}
@@ -92,7 +90,7 @@ class TriggerExpressions extends Component {
                   <EuiFieldNumber {...field} />
                 </EuiFormRow>
               )}
-            />
+            </Field>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js
index 903051e1..b4ab3d5b 100644
--- a/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js
+++ b/public/pages/CreateTrigger/components/TriggerExpressions/TriggerExpressions.test.js
@@ -32,7 +32,7 @@ describe('TriggerExpressions', () => {
   });
 
   test('calls openExpression when clicking expression', () => {
-    const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
+    const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
     const openExpression = jest.spyOn(
       wrapper.find(TriggerExpressions).instance(),
       'openExpression'
@@ -48,7 +48,7 @@ describe('TriggerExpressions', () => {
   });
 
   test('calls closeExpression when closing popover', async () => {
-    const wrapper = mount(<Formik render={() => <TriggerExpressions {...props} />} />);
+    const wrapper = mount(<Formik children={() => <TriggerExpressions {...props} />} />);
     const openExpression = jest.spyOn(
       wrapper.find(TriggerExpressions).instance(),
       'openExpression'
diff --git a/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap b/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
index 16c0a825..35abc84b 100644
--- a/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
+++ b/public/pages/CreateTrigger/components/TriggerExpressions/__snapshots__/TriggerExpressions.test.js.snap
@@ -59,9 +59,9 @@ exports[`TriggerExpressions renders 1`] = `
               }
             }
           >
-            <Field
-              render={[Function]}
-            />
+            <Field>
+              <Component />
+            </Field>
           </EuiFlexItem>
           <EuiFlexItem
             grow={false}
@@ -71,9 +71,9 @@ exports[`TriggerExpressions renders 1`] = `
               }
             }
           >
-            <Field
-              render={[Function]}
-            />
+            <Field>
+              <Component />
+            </Field>
           </EuiFlexItem>
         </EuiFlexGroup>
       </div>
diff --git a/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js b/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
index 8fadfd97..f7399ab0 100644
--- a/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
+++ b/public/pages/CreateTrigger/components/TriggerQuery/TriggerQuery.js
@@ -31,7 +31,7 @@ import 'brace/snippets/javascript';
 import 'brace/ext/language_tools';
 import { formikToTrigger } from '../../containers/CreateTrigger/utils/formikToTrigger';
 
-export const getExecuteMessage = response => {
+export const getExecuteMessage = (response) => {
   if (!response) return 'No response';
   const triggerResults = _.get(response, 'trigger_results');
   if (!triggerResults) return 'No trigger results';
@@ -70,12 +70,8 @@ const TriggerQuery = ({
           </EuiFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
-          <Field
-            name="script.source"
-            render={({
-              field: { value },
-              form: { errors, touched, setFieldValue, setFieldTouched },
-            }) => (
+          <Field name="script.source">
+            {({ field: { value }, form: { errors, touched, setFieldValue, setFieldTouched } }) => (
               <EuiFormRow
                 label={
                   <div>
@@ -101,7 +97,7 @@ const TriggerQuery = ({
                   theme={isDarkMode ? 'sense-dark' : 'github'}
                   height="200px"
                   width="100%"
-                  onChange={source => {
+                  onChange={(source) => {
                     setFieldValue('script.source', source);
                   }}
                   onBlur={() => setFieldTouched('script.source', true)}
@@ -109,7 +105,7 @@ const TriggerQuery = ({
                 />
               </EuiFormRow>
             )}
-          />
+          </Field>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFormRow label="Trigger condition response:" fullWidth>
diff --git a/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap b/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
index 2b174ed9..c8bc024b 100644
--- a/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
+++ b/public/pages/CreateTrigger/components/TriggerQuery/__snapshots__/TriggerQuery.test.js.snap
@@ -35,8 +35,9 @@ exports[`TriggerQuery renders 1`] = `
     <EuiFlexItem>
       <Field
         name="script.source"
-        render={[Function]}
-      />
+      >
+        <Component />
+      </Field>
     </EuiFlexItem>
     <EuiFlexItem
       grow={false}
diff --git a/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger.js b/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger.js
index 58f425f7..ed749cc1 100644
--- a/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger.js
+++ b/public/pages/CreateTrigger/containers/CreateTrigger/CreateTrigger.js
@@ -196,11 +196,8 @@ export default class CreateTrigger extends Component {
     return (
       <div style={{ padding: '25px 50px' }}>
         {this.renderSuccessCallOut()}
-        <Formik
-          initialValues={initialValues}
-          onSubmit={this.onSubmit}
-          validateOnChange={false}
-          render={({ values, handleSubmit, isSubmitting, errors, isValid }) => (
+        <Formik initialValues={initialValues} onSubmit={this.onSubmit} validateOnChange={false}>
+          {({ values, handleSubmit, isSubmitting, errors, isValid }) => (
             <Fragment>
               <EuiTitle size="l">
                 <h1>{edit ? 'Edit' : 'Create'} trigger</h1>
@@ -217,10 +214,8 @@ export default class CreateTrigger extends Component {
                 isDarkMode={this.props.isDarkMode}
               />
               <EuiSpacer />
-              <FieldArray
-                name="actions"
-                validateOnChange={true}
-                render={(arrayHelpers) => (
+              <FieldArray name="actions" validateOnChange={true}>
+                {(arrayHelpers) => (
                   <ConfigureActions
                     arrayHelpers={arrayHelpers}
                     context={this.getTriggerContext(executeResponse, monitor, values)}
@@ -230,7 +225,7 @@ export default class CreateTrigger extends Component {
                     notifications={notifications}
                   />
                 )}
-              />
+              </FieldArray>
               <EuiSpacer />
               <EuiFlexGroup alignItems="center" justifyContent="flexEnd">
                 <EuiFlexItem grow={false}>
@@ -255,7 +250,7 @@ export default class CreateTrigger extends Component {
               />
             </Fragment>
           )}
-        />
+        </Formik>
       </div>
     );
   }
diff --git a/public/pages/Destinations/components/createDestinations/CustomWebhook/HeaderParamsEditor.js b/public/pages/Destinations/components/createDestinations/CustomWebhook/HeaderParamsEditor.js
index 6b384d02..acdf7c97 100644
--- a/public/pages/Destinations/components/createDestinations/CustomWebhook/HeaderParamsEditor.js
+++ b/public/pages/Destinations/components/createDestinations/CustomWebhook/HeaderParamsEditor.js
@@ -63,13 +63,11 @@ const propTypes = {
 const HeaderParamsEditor = ({ type, headerParams }) => (
   <Fragment>
     <SubHeader title={<h6>Header information</h6>} description={''} />
-    <FieldArray
-      name={`${type}.headerParams`}
-      validateOnChange={true}
-      render={arrayHelpers => (
+    <FieldArray name={`${type}.headerParams`} validateOnChange={true}>
+      {(arrayHelpers) => (
         <AttributeEditor
           onAdd={() => arrayHelpers.push({ key: '', value: '' })}
-          onRemove={index => index !== 0 && arrayHelpers.remove(index)}
+          onRemove={(index) => index !== 0 && arrayHelpers.remove(index)}
           items={headerParams}
           name={`${type}.headerParams`}
           addButtonText="Add header"
@@ -78,7 +76,7 @@ const HeaderParamsEditor = ({ type, headerParams }) => (
           onRenderValueField={handleRenderValueField}
         />
       )}
-    />
+    </FieldArray>
   </Fragment>
 );
 
diff --git a/public/pages/Destinations/components/createDestinations/CustomWebhook/QueryParamsEditor.js b/public/pages/Destinations/components/createDestinations/CustomWebhook/QueryParamsEditor.js
index e84fdd6d..46b133ed 100644
--- a/public/pages/Destinations/components/createDestinations/CustomWebhook/QueryParamsEditor.js
+++ b/public/pages/Destinations/components/createDestinations/CustomWebhook/QueryParamsEditor.js
@@ -61,14 +61,12 @@ const propTypes = {
 };
 
 const QueryParamsEditor = ({ type, queryParams, isEnabled = true }) => (
-  <FieldArray
-    name={`${type}.queryParams`}
-    validateOnChange={true}
-    render={arrayHelpers => (
+  <FieldArray name={`${type}.queryParams`} validateOnChange={true}>
+    {(arrayHelpers) => (
       <AttributeEditor
         titleText="Query parameters"
         onAdd={() => arrayHelpers.push({ key: '', value: '' })}
-        onRemove={index => arrayHelpers.remove(index)}
+        onRemove={(index) => arrayHelpers.remove(index)}
         items={queryParams}
         name={`${type}.queryParams`}
         addButtonText="Add parameter"
@@ -78,7 +76,7 @@ const QueryParamsEditor = ({ type, queryParams, isEnabled = true }) => (
         isEnabled={isEnabled}
       />
     )}
-  />
+  </FieldArray>
 );
 
 QueryParamsEditor.propTypes = propTypes;
diff --git a/public/pages/Destinations/containers/CreateDestination/CreateDestination.js b/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
index 9d0a3928..008a9538 100644
--- a/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
+++ b/public/pages/Destinations/containers/CreateDestination/CreateDestination.js
@@ -180,7 +180,8 @@ class CreateDestination extends React.Component {
           enableReinitialize={true}
           validateOnChange={false}
           onSubmit={this.handleSubmit}
-          render={({ values, handleSubmit, isSubmitting, errors, isValid }) => (
+        >
+          {({ values, handleSubmit, isSubmitting, errors, isValid }) => (
             <Fragment>
               <EuiTitle size="l">
                 <h1>{edit ? 'Edit' : 'Add'} destination</h1>
@@ -269,7 +270,7 @@ class CreateDestination extends React.Component {
               />
             </Fragment>
           )}
-        />
+        </Formik>
       </div>
     );
   }
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
index 1314ca44..b4e7e702 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
+++ b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/ManageEmailGroups.js
@@ -267,7 +267,8 @@ export default class ManageEmailGroups extends React.Component {
           this.processEmailGroups(values).then(() => onClickSave());
         }}
         validateOnChange={false}
-        render={({ values, handleSubmit, isSubmitting }) => (
+      >
+        {({ values, handleSubmit, isSubmitting }) => (
           <EuiOverlayMask>
             <EuiModal
               className="modal-manage-email"
@@ -281,10 +282,8 @@ export default class ManageEmailGroups extends React.Component {
               <EuiHorizontalRule margin="s" />
 
               <EuiModalBody>
-                <FieldArray
-                  name="emailGroups"
-                  validateOnChange={true}
-                  render={(arrayHelpers) =>
+                <FieldArray name="emailGroups" validateOnChange={true}>
+                  {(arrayHelpers) =>
                     !isEmailAllowed || loadingEmailGroups ? (
                       <div style={{ display: 'flex', justifyContent: 'center' }}>
                         {isEmailAllowed ? 'Loading Email Groups...' : 'Email is disallowed'}
@@ -293,7 +292,7 @@ export default class ManageEmailGroups extends React.Component {
                       this.renderEmailGroups({ values, arrayHelpers })
                     )
                   }
-                />
+                </FieldArray>
               </EuiModalBody>
 
               {this.hasEmailGroupsToProcess(values) ? (
@@ -316,7 +315,7 @@ export default class ManageEmailGroups extends React.Component {
             </EuiModal>
           </EuiOverlayMask>
         )}
-      />
+      </Formik>
     ) : null;
   }
 }
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/__snapshots__/ManageEmailGroups.test.js.snap b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/__snapshots__/ManageEmailGroups.test.js.snap
index ccd3af84..3cbc5841 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/__snapshots__/ManageEmailGroups.test.js.snap
+++ b/public/pages/Destinations/containers/CreateDestination/ManageEmailGroups/__snapshots__/ManageEmailGroups.test.js.snap
@@ -21,7 +21,6 @@ exports[`ManageEmailGroups renders when email is disallowed 1`] = `
   <Formik
     initialValues={Object {}}
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
   >
     <EuiOverlayMask>
@@ -556,7 +555,6 @@ exports[`ManageEmailGroups renders when email is disallowed 1`] = `
                               >
                                 <FormikConnect(FieldArrayInner)
                                   name="emailGroups"
-                                  render={[Function]}
                                   validateOnChange={true}
                                 >
                                   <FieldArrayInner
@@ -603,7 +601,6 @@ exports[`ManageEmailGroups renders when email is disallowed 1`] = `
                                       }
                                     }
                                     name="emailGroups"
-                                    render={[Function]}
                                     validateOnChange={true}
                                   >
                                     <div
@@ -710,7 +707,6 @@ exports[`ManageEmailGroups renders when visible 1`] = `
   <Formik
     initialValues={Object {}}
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
   >
     <EuiOverlayMask>
@@ -1245,7 +1241,6 @@ exports[`ManageEmailGroups renders when visible 1`] = `
                               >
                                 <FormikConnect(FieldArrayInner)
                                   name="emailGroups"
-                                  render={[Function]}
                                   validateOnChange={true}
                                 >
                                   <FieldArrayInner
@@ -1292,7 +1287,6 @@ exports[`ManageEmailGroups renders when visible 1`] = `
                                       }
                                     }
                                     name="emailGroups"
-                                    render={[Function]}
                                     validateOnChange={true}
                                   >
                                     <div
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js b/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
index 65e273be..7864d6f0 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
+++ b/public/pages/Destinations/containers/CreateDestination/ManageSenders/ManageSenders.js
@@ -255,7 +255,8 @@ export default class ManageSenders extends React.Component {
           this.processSenders(values).then(() => onClickSave());
         }}
         validateOnChange={false}
-        render={({ values, handleSubmit, isSubmitting }) => (
+      >
+        {({ values, handleSubmit, isSubmitting }) => (
           <EuiOverlayMask>
             <EuiModal
               className="modal-manage-email"
@@ -269,10 +270,8 @@ export default class ManageSenders extends React.Component {
               <EuiHorizontalRule margin="s" />
 
               <EuiModalBody>
-                <FieldArray
-                  name="senders"
-                  validateOnChange={true}
-                  render={(arrayHelpers) =>
+                <FieldArray name="senders" validateOnChange={true}>
+                  {(arrayHelpers) =>
                     !isEmailAllowed || loadingSenders ? (
                       <div style={{ display: 'flex', justifyContent: 'center' }}>
                         {isEmailAllowed ? 'Loading Senders...' : 'Email is disallowed'}
@@ -281,7 +280,7 @@ export default class ManageSenders extends React.Component {
                       this.renderSenders({ values, arrayHelpers })
                     )
                   }
-                />
+                </FieldArray>
               </EuiModalBody>
 
               {this.hasSendersToProcess(values) ? (
@@ -304,7 +303,7 @@ export default class ManageSenders extends React.Component {
             </EuiModal>
           </EuiOverlayMask>
         )}
-      />
+      </Formik>
     ) : null;
   }
 }
diff --git a/public/pages/Destinations/containers/CreateDestination/ManageSenders/__snapshots__/ManageSenders.test.js.snap b/public/pages/Destinations/containers/CreateDestination/ManageSenders/__snapshots__/ManageSenders.test.js.snap
index 2ee04789..a5ceaa4c 100644
--- a/public/pages/Destinations/containers/CreateDestination/ManageSenders/__snapshots__/ManageSenders.test.js.snap
+++ b/public/pages/Destinations/containers/CreateDestination/ManageSenders/__snapshots__/ManageSenders.test.js.snap
@@ -21,7 +21,6 @@ exports[`ManageSenders renders when email is disallowed 1`] = `
   <Formik
     initialValues={Object {}}
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
   >
     <EuiOverlayMask>
@@ -556,7 +555,6 @@ exports[`ManageSenders renders when email is disallowed 1`] = `
                               >
                                 <FormikConnect(FieldArrayInner)
                                   name="senders"
-                                  render={[Function]}
                                   validateOnChange={true}
                                 >
                                   <FieldArrayInner
@@ -603,7 +601,6 @@ exports[`ManageSenders renders when email is disallowed 1`] = `
                                       }
                                     }
                                     name="senders"
-                                    render={[Function]}
                                     validateOnChange={true}
                                   >
                                     <div
@@ -710,7 +707,6 @@ exports[`ManageSenders renders when visible 1`] = `
   <Formik
     initialValues={Object {}}
     onSubmit={[Function]}
-    render={[Function]}
     validateOnChange={false}
   >
     <EuiOverlayMask>
@@ -1245,7 +1241,6 @@ exports[`ManageSenders renders when visible 1`] = `
                               >
                                 <FormikConnect(FieldArrayInner)
                                   name="senders"
-                                  render={[Function]}
                                   validateOnChange={true}
                                 >
                                   <FieldArrayInner
@@ -1292,7 +1287,6 @@ exports[`ManageSenders renders when visible 1`] = `
                                       }
                                     }
                                     name="senders"
-                                    render={[Function]}
                                     validateOnChange={true}
                                   >
                                     <div